# Stepper

Horizontal steps for short linear flows (Create product: Pick, Read, Confirm): numbered marks for upcoming, current, complete, error and locked. Phone: a compact "Step 2 of 3" indicator.

- **Group:** Wizard and stepper · **family:** `wizard-stepper` · **shadcn:** composed
- **Build:** No shadcn stepper: an `<ol>` of step buttons with `aria-current="step"`; Radix `Progress` for meters.
- **In apps/admin today:** Not in apps/admin.
- **Client component:** yes. 

## Content rules

- Two-word step names.

## Do

- Three to five steps.

## Don't

- A stepper for independent sections (use the guided editor rail).

## Accessibility

- **Keyboard:** Complete steps are buttons; others are not focusable.
- **ARIA:** `<ol>`; `aria-current="step"`; state in text ("completed").
- **Focus:** Ring on step buttons.

## Tokens

`--font-voice` `--font-stretch-title` `--r-pill` `--w-semibold` `--text-small` `--input` `--muted-foreground` `--background` `--motion-hover` `--s-2` `--s-6` `--border` `--motion-sheet-in` `--primary` `--w-medium` `--text-code` `--font-code` `--warning` `--s-3` `--s-4` `--success` `--r-card` `--text-step-m` `--destructive`

## Files

`stepper.html` live specimen · `stepper.css` kit rules · `stepper.d.ts` props · full page: `docs/components/stepper/` (phone: `m/`).