Show where a multi-stage flow stands
An ordered list of steps for wizards and other staged flows. Steps before the active one render complete with a check, the active step takes the primary action fill and aria-current, and later steps stay muted until the flow reaches them. Pass an onStepClick handler and completed steps become buttons, so a reader can revisit an earlier stage without losing their place.
Default
- AccountCompleted
- Delivery
- Payment
- Review
With descriptions
- AccountCompletedSign in or continue as a guest
- DeliveryAddress and shipping speed
- PaymentCard or saved method
- ReviewConfirm and place the order
Vertical
- AccountCompletedSign in or continue as a guest
- DeliveryCompletedAddress and shipping speed
- PaymentCard or saved method
- ReviewConfirm and place the order
Progress states
- Account
- Delivery
- Payment
- Review
- AccountCompleted
- DeliveryCompleted
- PaymentCompleted
- ReviewCompleted
In a wizard
- Payment
- Review
// From the npm package
import { Stepper } from 'rift-ds/components/Stepper/Stepper';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/stepper.json