Steps

Sequence content using the Steps component

Steps are the best way to display a series of actions of events to your users. You can add as many steps as desired.

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 Props

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 Props

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

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.