Stepper
Progress steps for wizards and multi-stage flows.
- AccountYour details
- 2WorkspaceSet up team
- 3InviteAdd members
Install
npx shadcn@latest add https://plinth.dhrumilkherde.com/r/stepper.jsonUsage
import { Stepper } from "@/components/ui/stepper";
<Stepper
current={step}
steps={[
{ title: "Account" },
{ title: "Workspace" },
{ title: "Invite" },
]}
/>Vertical
- Order placedJuly 14
- ShippedJuly 16
- 3Out for delivery
- 4Delivered
Props
| Prop | Type | Default |
|---|---|---|
steps | { title, description? }[] | required |
current | number (zero-based) | required |
orientation | horizontal · vertical | horizontal |
Accessibility
- Renders an ordered list; the active step carries
aria-current="step". - Completed steps show a check, so state isn't conveyed by color alone.