Steps Component
A built-in component to turn a numbered list into a visual representation of steps.
Example
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.
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.
MDX
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.
MDX
<Steps>
- ### Step 1
+ {<h3>Step 1</h3>}
Contents for step 1.
</Steps>