Chevron Steps
A clean chevron-style stepper with arrow tails. Great for multi-step forms and wizards.
Keyboard and screen-reader friendly, responsive, and customizable via props.
Examples
Brand
Clickable progress
Neutral, large
Installation
npx shadcn-extras@latest add chevron-steps
Props
| Prop | Type | Default | Description |
|---|---|---|---|
steps | Array<{ id?: string|number; label: string; description?: string; className?: string; disabled?: boolean }> | — | Steps in order. |
current | number | 0 | Zero-based active step index. |
onStepClick | (index, step) => void | — | Called when a step is clicked (if not disabled). |
size | 'sm' | 'md' | 'lg' | 'md' | Height & text size. |
variant | 'brand' | 'neutral' | 'brand' | Color scheme. |
tailWidth | number | 18 | Arrow head width (px). |
radius | 'md' | 'lg' | 'xl' | '2xl' | '2xl' | Outer roundness. |
scrollable | boolean | true | Enables horizontal scroll on small screens. |
className | string | — | Root classes. |
stepClassName / stepActiveClassName / stepCompletedClassName / stepUpcomingClassName | string | — | Slot overrides. |