Steps

Sequence content using the Steps component

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, and h3.

Individual step properties

children · string | ReactNode · required

The content of a step either as plain text or components.

icon · string

The icon to display.

Options:

• Font Awesome icon name
• Lucide icon name
• JSX-compatible SVG code wrapped in curly braces
• URL to an externally hosted icon
• Path to an icon file in your project

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.

title · string

The title is the primary text for the step and shows up next to the indicator.

stepNumber · number

The number of the step.

titleSize · string · default: "p"

The size of the step titles. One of p, h2, and h3.