Skip to main content
Use steps to display a series of sequential actions or events. You can add as many steps as needed.
1

First Step

These are instructions or content that only pertain to the first step.
2

Second Step

These are instructions or content that only pertain to the second step.
3

Third Step

These are instructions or content that only pertain to the third step.
Steps example
<Steps>
  <Step title="First Step">
    These are instructions or content that only pertain to the first step.
  </Step>
  <Step title="Second Step">
    These are instructions or content that only pertain to the second step.
  </Step>
  <Step title="Third Step">
    These are instructions or content that only pertain to the third step.
  </Step>
</Steps>

​
Steps properties

​
children
ReactElement<StepProps>[]
required
A list of Step components.
​
titleSize
string
default:"p"
The size of the step titles. One of p, h2, h3, and h4.

​
Individual step properties

​
title
string
required
The title is the primary text for the step and shows up next to the indicator.
​
children
string | ReactNode
The content of a step either as plain text or components.
​
icon
string
The icon to display.Options:
  • Font Awesome icon name, if you have the icons.library property set to fontawesome in your docs.json
  • Lucide icon name, if you have the icons.library property set to lucide in your docs.json
  • Tabler icon name, if you have the icons.library property set to tabler in your docs.json
  • URL to an externally hosted icon
  • Path to an icon file in your project
  • SVG code wrapped in curly braces
For custom SVG icons:
  1. Convert your SVG using the SVGR converter.
  2. Paste your SVG code into the SVG input field.
  3. Copy the complete <svg>...</svg> element from the JSX output field.
  4. Wrap the JSX-compatible SVG code in curly braces: icon={<svg ...> ... </svg>}.
  5. Adjust height and width as needed.
​
iconType
string
The Font Awesome icon style. Only used with Font Awesome icons.Options: regular, solid, light, thin, sharp-solid, duotone, brands.
​
stepNumber
number
The number of the step.
​
titleSize
string
default:"p"
The size of the step titles. One of p, h2, h3, and h4.
​
id
string
A custom ID for the step, used for anchor linking and table of contents navigation.
​
noAnchor
boolean
default:"false"
Whether to hide the anchor link for the step.