Multi-step flow with numbered progress, a line that fills as you advance, and sliding step content.
Express to Lisbon, arrives Thursday
npx shadcn@latest add https://hyperblur.dev/r/stepper.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/stepper.tsx.
import { Stepper } from "@/components/hyperblur/stepper"
<Stepper steps={steps} onFinish={() => save()} />| Prop | Type | Default | Description |
|---|---|---|---|
| steps | { id: string; title: string; content: ReactNode }[] | required | The steps, in order. Only the current step's content is rendered. |
| initialStep | number | 0 | Index of the step shown first. |
| onStepChange | (index: number) => void | Called with the new index whenever the step changes. | |
| onFinish | () => void | Called when the user presses the finish button on the last step. | |
| labels | { back: string; next: string; finish: string } | { back: "Back", next: "Next", finish: "Finish" } | Button text. Pass any subset to translate or rename. |
| allowClickNavigation | boolean | true | Let users click a completed step to go back to it. |