Docsalot home pagelight logo
  1. Steps

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 theme={null}
<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
required
ReactElement<StepProps>[]

A list of Step components.

titleSize
default:p
string

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

​
Individual step properties

children
required
string | ReactNode

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
default:p
string

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