Stepper
Multi-step progress indicator, horizontal or vertical, with clickable completed steps.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
StepperProps
Also accepts all props of Omit<React.ComponentProps<"ol">, "onChange">
| Prop | Type | Default | Description |
|---|---|---|---|
| steps* required | StepperStep[] | — | — |
| step | number | — | Zero-based index of the current step |
| defaultStep | number | 0 | — |
| onStepChange | (step: number) => void | — | — |
| orientation | "horizontal" | "vertical" | "horizontal" | — |
| clickable | boolean | true | Allow jumping back to completed steps |
Install
$ npx shadcn@latest add https://chromotion.dev/r/stepper.jsonThe CLI installs the base component; your customizations live in the code generated on the Customize tab.