Progress steps, horizontal or vertical, with number, icon, dot or bar markers; connectors fill with a spring, numbers morph into drawn checks and the current step breathes.
stepperstepswizardprogressonboardingcheckout
Installation
$npx shadcn@latest add @geturui/stepper
Usage
usage.tsx
1import { Stepper } from "@/components/ui/stepper";
2
3const steps = [
4 { title: "Account", description: "Name and email" },
5 { title: "Workspace", description: "Pick a theme" },
6 { title: "Billing", description: "Choose a plan" },
7 { title: "Launch", description: "Install the CLI" },
8];
9
10export function Onboarding({ step, setStep }: { step: number; setStep: (i: number) => void }) {
11 return <Stepper steps={steps} current={step} onStepClick={setStep} />;
12}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
steps* | { title, description?, icon?, error? }[] | — | The steps. error marks one as failed. |
current* | number | — | Index of the current step (0-based). Earlier steps are complete; pass steps.length when all are done. |
orientation | "horizontal" | "vertical" | "horizontal" | Row of columns, or a vertical list with connectors down the left. |
marker | "number" | "icon" | "dot" | "bar" | "number" | Marker style. bar renders segmented story-style bars (horizontal). |
size | "sm" | "md" | "md" | 28 or 36px markers. |
onStepClick | (index) => void | — | Makes completed steps buttons that jump back. |
compact | "always" | "mobile" | "never" | "mobile" (horizontal) | "Step 2 of 4" with the step title and a progress bar; mobile swaps below sm. |
StepperCompact | { steps, current } | — | The compact header on its own. |
Accessibility
- An ordered list; the current step has aria-current="step" and every step reads its state (completed, current step, not started, needs attention).
- Clickable completed steps are real buttons named "Go back to step n: title".
- The compact mode exposes a progressbar with a text value like "Step 2 of 4: Workspace".
- Connector fills, check drawing and the breathing ring are skipped under reduced motion.