Browse components
Stepper
Multi-step flow with a filling progress track, pulsing active step, sliding content that resizes smoothly and a completion state.
Installation
npx shadcn@latest add @glint-ui/stepperFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/stepper.json
Usage
import { Stepper } from "@/components/ui/stepper";
<Stepper onComplete={() => save()}>
<Step title="Account">…</Step>
<Step title="Plan">…</Step>
<Step title="Review">…</Step>
</Stepper>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | `<Step title>` elements, one per step. |
| initialStep | number | 1 | 1-based step to start on. |
| accentColor | string | "#c6ff3d" | Active and completed color. |
| accentForeground | string | "#0a0a0a" | Text and icon color on the accent. |
| backText | string | "Back" | Back button label. |
| nextText | string | "Continue" | Next button label. |
| completeText | string | "Complete" | Last button label. |
| clickableSteps | boolean | true | Jump to a step by clicking its dot. |
| completedContent | ReactNode | — | Shown after the last step is completed. |
| onStepChange | ReactNode | — | (step: number) => void |
| onComplete | ReactNode | — | () => void |
| className | string | — | Extra classes for the root element. |