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 or svg

A Font Awesome icon, Lucide icon, or SVG code in icon={}.

​
iconType
string

For Font Awesome icons only: One of 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.