# Stepper

> A token-driven onboarding stepper with a continuous progress rail, animated number-to-check nodes, a live percentage readout, and a rich per-step content stage that advances real Back/Next state — fully design-system agnostic.

- Category: Navigation
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Atlas
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: stepper, wizard, progress
- Page: https://builder.atheros.ai/components/stepper
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_stepper/preview-f6a21590ea9f.webp

## Features

- Continuous progress rail with a gradient fill that scales smoothly via `transform: scaleX` as steps clear
- Numbered nodes that swap to a drawn-in checkmark (animated `stroke-dashoffset`) when completed
- Active node carries a pulsing halo ring and a scale-up emphasis
- Live percentage and "Step X of N" readout in the header, with the badge icon tracking the active step
- Rich content stage per step — icon tile, kicker, title, description, and a meta line — that cross-fades on change
- Real Back/Next state machine with a Finish state that marks every node complete
- Data-driven: steps and icons are defined in `js/data.js` and rendered at runtime
- Live `role="status"` region announces the current step to assistive technology
- `aria-current="step"` tracks the active node; Arrow keys move between steps
- Dark/light aware through contrast-safe semantic roles, design-system shape/elevation bridges, and full `prefers-reduced-motion` support

## Accessibility

- **Current step** — `aria-current="step"` set on the active node element
- **Live readout** — `role="status"` with `aria-live="polite"` announces "Step X of N: Title"
- **Step list semantics** — `role="list"` on the rail with list-item nodes
- **Keyboard navigation** — Arrow Left/Right move between steps; Back/Next are native buttons
- **Button labels** — Every control has an explicit `aria-label`
- **Decorative graphics** — Rail track, badge, and icons are `aria-hidden`
- **Focus indicators** — `:focus-visible` with `--ring` outline on all interactive elements
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations

## Keyboard shortcuts

- `ArrowRight` — Advance to the next step
- `ArrowLeft` — Return to the previous step
- `Enter` — Activate the focused Back/Next button
- `Space` — Activate the focused Back/Next button
- `Tab` — Move focus between the Back and Next buttons

## Common questions

**Which frameworks is Stepper available in?**

Stepper ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is the Stepper navigation component free?**

Stepper is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Stepper support dark mode?**

Yes. Stepper ships light and dark themes, both drawn from the Atlas design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Stepper live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/stepper

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt