Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/shuding/nextra/llms.txt

Use this file to discover all available pages before exploring further.

The Steps component transforms a sequence of Markdown headings into a numbered, vertically-connected step list — the typical pattern used in installation guides, tutorials, and onboarding flows. You write normal Markdown headings inside the wrapper and Nextra takes care of the numbering and connecting line automatically, via a CSS counter keyed to a unique runtime ID.

​
Import

import { Steps } from 'nextra/components'

​
Props

<Steps> accepts all standard HTML div attributes and no component-specific props. The auto-numbering behaviour is driven entirely by CSS applied to heading elements found inside the wrapper.
PropTypeDescription
childrenReactNodeMarkdown headings (## through ######) and their associated content.
classNamestringAdditional CSS class names for the steps container.

​
Usage

​
Basic Steps

Wrap a set of Markdown headings with <Steps>. Any heading level from <h2> to <h6> works — choose the level that fits your page hierarchy without skipping levels. 
import { Steps } from 'nextra/components'

<Steps>
## Install

Run `npm install`.

## Configure

Edit your config file.

## Start

Run `npm run dev`.
</Steps>

​
Using Within a Larger Document

Steps are most useful for a section inside a longer page. Use a heading level one step below your section heading so the steps don’t appear in the main table of contents (or use the technique below to exclude them explicitly). 
import { Steps } from 'nextra/components'

## Getting Started

Follow these steps to set up Nextra for the first time.

<Steps>
### Create a Next.js project

```sh
npx create-next-app@latest my-docs
```

### Install Nextra

```sh
cd my-docs
npm install nextra nextra-theme-docs
```

### Add the Nextra config

Create a `next.config.mjs` file at the project root and add the Nextra plugin.

### Start the dev server

```sh
npm run dev
```
</Steps>

​
Excluding Step Headings from the Table of Contents

By default, every Markdown heading inside <Steps> is collected by Nextra and listed in the page’s table of contents. To prevent this, replace the Markdown heading syntax with an inline HTML heading element wrapped in curly braces. The step numbering is preserved because the CSS counter targets the element tag, not the syntax. 
import { Steps } from 'nextra/components'

<Steps>
{<h3>Install dependencies</h3>}

Run `pnpm install` to install all packages.

{<h3>Start the development server</h3>}

Run `pnpm dev` and open `http://localhost:3000`.
</Steps>
Heading elements written as {<h3>…</h3>} are treated as JSX expressions by MDX. This tells Nextra’s remark plugin to skip them during table-of-contents extraction while still rendering them in the page output.

​
Rich Step Content

Each step can contain any MDX content — paragraphs, code blocks, callouts, images, and nested components. 
import { Steps } from 'nextra/components'
import { Callout } from 'nextra/components'

<Steps>
## Install Nextra

```sh
npm install nextra nextra-theme-docs
```

## Configure `next.config.mjs`

```js filename="next.config.mjs"
import nextra from 'nextra'

const withNextra = nextra({})
export default withNextra({})
```

<Callout type="info">
  Make sure your `next.config` file uses the `.mjs` extension so that ES module
  syntax (`import`/`export`) is supported.
</Callout>

## Create Your First Page

Add `content/index.mdx` and write your first MDX document.
</Steps>

Build docs developers (and LLMs) love

Get started for freeTalk to us