Skip to main content

On this pageOverview

Steps

Create numbered step-by-step procedures with the steps component to guide users through sequential tasks, tutorials, and setup workflows.

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

First Step
These are instructions or content that only pertain to the first step.
Second Step
These are instructions or content that only pertain to the second step.
Third Step
These are instructions or content that only pertain to the third step.

Steps

<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[], required) — A list of Step components.
titleSize (string) — The size of the step titles. One of p, h2, h3, and h4.
className (string) — Additional CSS classes to apply to the steps container.

Individual step properties

title (string, required) — The title is the primary text for the step and shows up next to the indicator. Supports inline Markdown formatting, such as **bold**, _italic_, and `code`.
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
A single emoji (for example, 💡 or 🚀)
URL to an externally hosted icon
Path to an icon file in your project
SVG code wrapped in curly braces

For custom SVG icons:

Convert your SVG using the SVGR converter.
Paste your SVG code into the SVG input field.
Copy the complete <svg>...</svg> element from the JSX output field.
Wrap the JSX-compatible SVG code in curly braces: icon={<svg ...> ... </svg>}.
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) — 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) — Whether to hide the anchor link for the step.
className (string) — Additional CSS classes to apply to the step.

Suggest an edit