# Step header

The top of each step: step number, title, one sentence of what to do, and the single next step named in the primary.

- **Group:** Wizard and stepper · **family:** `wizard-stepper` · **shadcn:** composed
- **Build:** Layout.
- **In apps/admin today:** —
- **Client component:** no. 

## Content rules

- Lede says the outcome, not the UI.

## Do

- Name the next step in the primary ("Continue to prices").

## Don't

- Paragraphs of instructions.

## Accessibility

- **Keyboard:** —
- **ARIA:** Title is the step `h2`; focus moves to it on step change.
- **Focus:** Heading `tabIndex=-1` receives focus.

## Tokens

`--font-voice` `--font-stretch-title` `--s-8` `--text-small` `--muted-foreground` `--s-1` `--title-w` `--text-page` `--lh-page` `--tr-page` `--text-body`

## Files

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