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 properties
A list of
Step
components.The size of the step titles. One of
p
, h2
, and h3
.Individual step properties
The content of a step either as plain text or components.
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
- 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
andwidth
as needed.
The Font Awesome icon style. Only used with Font Awesome icons.Options:
regular
, solid
, light
, thin
, sharp-solid
, duotone
, brands
.The title is the primary text for the step and shows up next to the indicator.
The number of the step.
The size of the step titles. One of
p
, h2
, and h3
.