Progress Steps
Multi-step progress indicator in four layouts.
npx paubha@latest add progress-steps
import { ProgressStep, ProgressSteps } from "@/components/ui/progress-steps";
<ProgressSteps variant="horizontal">
<ProgressStep status="complete" label="Account" />
<ProgressStep status="current" label="Profile" />
<ProgressStep status="upcoming" label="Done" />
</ProgressSteps>
| Prop | Type | Default |
|---|
variant | "horizontal" | "vertical" | "numbered" | "description" | from orientation |
orientation | "horizontal" | "vertical" (shorthand for numbered / vertical) | "horizontal" |
| Prop | Type | Default |
|---|
status | "complete" | "current" | "upcoming" | required |
label | ReactNode | required |
description | ReactNode (vertical, numbered, description) | none |
stepNumber | number (numbered) | index + 1 |