Stepper
Progress through a multi-step flow, showing what's done, where you are, and what's left.
AccountYour details
WorkspaceName and members
BillingPlan and payment
One number drives every state
There's no per-step status to keep in sync: current decides it. Steps before it are completed, after it upcoming. That makes the wrong combination — say, step three complete while step two isn't — unrepresentable.
Vertical
AccountYour details
WorkspaceName and members
BillingPlan and payment
Driving it
AccountYour details
WorkspaceName and members
BillingPlan and payment
Props
StepperStep is exported separately if you need to place a single step outside the track.
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | { label: string; description?: string }[] | The steps, in order. | |
| current | number | Index of the active step, 0-based. Everything before it renders as completed, everything after as upcoming. | |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Vertical suits sidebars and narrow columns. |