The wizard's step list: lettered markers, states, and optional navigation back to finished steps.
Stepper heads a multi-step form. Steps are complete, current, upcoming or error; onStepClick lets people return to a finished step.
Installation
npx shadcn@latest add KezLahd/rime/stepperAlso installs: base, icon.
Usage
import { Stepper } from "@/components/ui";
<Stepper aria-label="Checkout" steps={steps} onStepClick={goTo} />Examples
Default
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
Stepper
| Prop | Type | Default | Description |
|---|---|---|---|
| stepsRequired | ReadonlyArray<StepperStep> | ||
| onStepClick | (id: string) => void | Makes complete, error and current steps clickable. Upcoming steps never are. | |
| aria-label | string | ||
| className | string |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --r-flat | 1px | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --brand | tokens.css | … |
| --brand-deep | tokens.css | … |
| --brand-gradient | tokens.css | … |
| --danger-base | tokens.css | … |
| --danger-ink | tokens.css | … |
| --dur | tokens.css | … |
| --ease | tokens.css | … |
| --focus-ring | tokens.css | … |
| --glow-sm | tokens.css | … |
| --ink-brand | tokens.css | … |
| --ink-heading | tokens.css | … |
| --ink-inverse | tokens.css | … |
| --ink-muted | tokens.css | … |
| --ink-secondary | tokens.css | … |
| --r-sm | tokens.css | … |
| --recess-fill | tokens.css | … |
| --rgb-brand | tokens.css | … |
| --rgb-brand-deep | tokens.css | … |
| --rgb-danger | tokens.css | … |
| --shadow-recess | tokens.css | … |
| --surface-solid | tokens.css | … |
| --text-caption | tokens.css | … |
| --text-micro | tokens.css | … |
Accessibility
- The current step carries aria-current="step".
Do and don't
Do
- Let people go back to any finished step.
Don't
- Don't let people jump ahead past an unfinished step.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open stepper.md