Installation
Usage
"use client"
import { Stepper } from "@/components/stepper"
export function Onboarding() {
return (
<Stepper
label="Sign-up progress"
steps={[
{ id: "account", title: "Account", content: <p>Account fields</p> },
{ id: "plan", title: "Plan", content: <p>Plan fields</p> },
]}
onComplete={async () => {
await fetch("/api/signup", { method: "POST" })
}}
done={<p>You are all set.</p>}
/>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | { id; title; description?; content; validate? }[] | — | validate returns true or a message; may be async. |
| onComplete | () => void | string | Promise<…> | — | After the last step; return or throw a message to show an error. |
| done | ReactNode | "All done." | Shown after completion. |
| label | string | "Progress" | Accessible name of the progress list. |
| backLabel / nextLabel / finishLabel | string | Back / Continue / Finish | Button text. |
| --stepper-accent | CSS variable | --primary | Progress and button colour. |
Accessibility
- Progress is an ordered list with aria-current="step"; finished steps are buttons that go back.
- Focus moves to each new step's heading, and the change is announced.
- Validation errors are alerts; async checks disable the buttons and say "Checking…".
- Steps you've left stay mounted, so typed values survive going back.
- Slides, the breathing ring, the shake and the drawn ticks are removed under prefers-reduced-motion; focus still moves to each new step.
Changelog
- v1.0.0Latest
First release.