Installation
npx sdaia-ui@latest add stepper
Usage
import { Stepper } from '@/components/ui/Stepper';
import { StepperItem } from '@/components/ui/StepperItem';1<Stepper currentStep={2} aria-label="Create a user">2<StepperItem title="Account" />3<StepperItem title="Details" />4<StepperItem title="Review" />5<StepperItem title="Done" />6</Stepper>
Examples
Default
Horizontal stepper above a form. currentStep sets every status from the step's position.
Loading demo: stepper-default
Vertical
Steps stacked in a column with the text beside them; fits a side panel.
Loading demo: stepper-vertical
Statuses
Completed, Current, Upcoming and Error. The connector turns green once the step before it is complete.
Loading demo: stepper-statuses
Error on a step
Mark the step that has a problem and say what is wrong in the description.
Loading demo: stepper-error
Approval workflow
Use the description to show the owner or date of each step.
Loading demo: stepper-approval
Arabic (RTL)
The order and alignment mirror for right-to-left.
Loading demo: stepper-rtl
Vertical, Arabic (RTL)
The vertical stepper mirrors too: the rail moves to the right.
Loading demo: stepper-vertical-rtl
When to use
Use the stepper for:
- Multi-step forms with three to six steps