Stepper
A versatile component designed to guide users through a multi-step process with visual indicators for completed, active, and upcoming steps.
Installation
npx shadcn add https://extend-ui.com/registry/stepper.json Stepper core subcomponents and usage
Stepper.Item
The Stepper.Item component represents a single step in the process.
<Stepper>
<Stepper.Item step={0}>{/* Step content */}</Stepper.Item>
</Stepper>Stepper.Trigger
The Stepper.Trigger component is used to make steps interactive and clickable.
<Stepper>
<Stepper.Item step={0}>
<Stepper.Trigger>{/* Trigger content */}</Stepper.Trigger>
</Stepper.Item>
</Stepper>Stepper.Indicator
The Stepper.Indicator component displays the step number or completion status.
<Stepper>
<Stepper.Item step={0}>
<Stepper.Indicator />
</Stepper.Item>
</Stepper>Stepper.Title
The Stepper.Title component displays the title of the step.
<Stepper>
<Stepper.Item step={0}>
<Stepper.Title>Step Title</Stepper.Title>
</Stepper.Item>
</Stepper>Stepper.Description
The Stepper.Description component provides additional information about the step.
<Stepper>
<Stepper.Item step={0}>
<Stepper.Description>Step description</Stepper.Description>
</Stepper.Item>
</Stepper>Stepper.Separator
The Stepper.Separator component creates a visual connector between steps.
<Stepper>
<Stepper.Item step={0}>{/* Step content */}</Stepper.Item>
<Stepper.Separator />
<Stepper.Item step={1}>{/* Step content */}</Stepper.Item>
</Stepper>Stepper component props
| Name | Type | Description |
|---|---|---|
| defaultValue | number | The default active step index when the component is uncontrolled. Defaults to 0. |
| value | number | The controlled active step index. When provided, the component becomes controlled. |
| separatorWidth | number | The width of the separator between steps in pixels. Defaults to 50. |
| onValueChange | (value: number) => void | Callback function triggered when the active step changes. |
| variant | default | The visual style variant of the stepper. Currently only supports the default variant. |
| orientation | horizontal | vertical | The orientation of the stepper. Defaults to "horizontal". |
| className | string | Additional CSS classes to apply custom styling to the stepper. |
| ...props | React.HTMLAttributes<HTMLDivElement> | Additional props that can be passed to the stepper div. |
Stepper.Item component props
| Name | Type | Description |
|---|---|---|
| step | number | The index of the step. Required. |
| completed | boolean | Whether the step is marked as completed. Defaults to false. |
| disabled | boolean | Whether the step is disabled and cannot be interacted with. Defaults to false. |
| loading | boolean | Whether the step is in a loading state. Defaults to false. |
| className | string | Additional CSS classes to apply custom styling to the step item. |
| children | React.ReactNode | The content of the step item. |
| ...props | React.HTMLAttributes<HTMLDivElement> | Additional props that can be passed to the step item div. |
Stepper.Indicator component props
| Name | Type | Description |
|---|---|---|
| variant | default | outline | dotted | The visual style variant of the indicator. Defaults to "default". |
| asChild | boolean | If true, the indicator will render its children as the root element. Defaults to false. |
| className | string | Additional CSS classes to apply custom styling to the indicator. |
| children | React.ReactNode | The content of the indicator. By default, it shows the step number, a check icon for completed steps, or a loading icon. |
| ...props | React.HTMLAttributes<HTMLSpanElement> | Additional props that can be passed to the indicator span. |