Stepper
A standalone multi-step progress stepper indicator with checkmark drawing, connector fill, and an active pulse.
Shows the progress of a multi-step flow with dots and connectors: completed steps show a checkmark, connectors fill smoothly, and the active step carries a pulsing indicator. Both horizontal and vertical arrangements are supported.
Loading preview…
npx shadcn@latest add https://webberui.com/r/stepper.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
2
36
<Stepper />
Installation
npx shadcn@latest add https://webberui.com/r/stepper.jsonOr, once registries are configured in components.json, install it as @webberui/stepper.
Usage
import { Stepper } from "@/components/ui/stepper";
const steps = [
{ title: "Account", description: "Create your sign-in details" },
{ title: "Profile", description: "Fill in your basic information" },
{ title: "Done", description: "Review and submit" },
];
<Stepper steps={steps} current={1} />;current is a 0-based index: steps below it count as completed, the one equal to it is active, and those above it are incomplete.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
steps | StepperStep[] | — | The list of steps, each with a title and an optional description |
current | number | — | Current step index (0-based); steps below it are completed |
orientation | "horizontal" | "vertical" | "horizontal" | Arrangement direction |
size | number | 36 | Dot diameter (px); connectors align to its center |
className | string | — | Forwarded to the outermost container |
The StepperStep type is { title: string; description?: string }.
Accessibility
- The container carries
role="list"and anaria-label, and each step isrole="listitem" - The active step carries
aria-current="step" - When the user has "reduce motion" enabled at the system level, the pulse and the drawing animation are turned off and the final state is shown directly