Stepper
A multi-step progress indicator for wizards and onboarding flows. Renders dots connected by a line, with completed states checked and the current step highlighted.
Account
Create your account
Profile
Tell us about yourself
Confirm
Review and submit
Vertical
Account
Create your account
Profile
Tell us about yourself
Confirm
Review and submit
Installation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
steps* | { id, title, description?, icon? }[] | — | Steps in order. Each is rendered with a numbered or icon dot, title, and optional description. |
currentStep* | number | — | 0-based index of the active step. |
orientation | "horizontal" | "vertical" | "horizontal" | Layout direction. |
onStepClick | (index: number) => void | — | Make completed (and optionally upcoming) steps clickable. |
allowClickOnCompleted | boolean | true | Allow clicking back to a completed step. |