import { Steps } from 'nextra/components'

# Steps Component

A built-in component to turn a numbered list into a visual representation of
steps.

## Example

<Steps>

### This is the first step

This is the first step description.

### This is the second step

This is the second step description.

### This is the third step

This is the third step description.

</Steps>

## Usage

Wrap a set of Markdown headings with the `<Steps>` component to turn them into
visual steps. It supports `<h2>`, `<h3>`, and `<h4>` headings. You can choose
the appropriate heading level based on the content hierarchy on the page.

{/* prettier-ignore */}
```mdx filename="MDX" {7-15}
import { Steps } from 'nextra/components'

## Getting Started

Here is some description.

<Steps>
### Step 1

Contents for step 1.

### Step 2

Contents for step 2.
</Steps>
```

## Excluding Headings from Table of Contents

To exclude the headings from the `<Steps>` component (or any other headings) to
appear in the Table of Contents, replace the Markdown headings `### ...` with
`<h3>` HTML element wrapped in curly braces.

{/* prettier-ignore */}
```diff filename="MDX"
<Steps>
- ### Step 1
+ {<h3>Step 1</h3>}

Contents for step 1.
</Steps>
```
