# Vertical Stepper

> A token-driven vertical stepper with step titles, descriptions, and a vertical connector that fills downward as steps complete, plus Back/Next controls — fully design-system agnostic.

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

## Features

- Vertical step list with numbered circles, titles, and supporting descriptions
- Completed steps swap their number for an animated checkmark
- Vertical connector fills downward purely via `transform: scaleY` for GPU-friendly motion
- Real Back/Next state machine that advances the active step and disables at the bounds
- Live "Step X of N" region announces the current step to assistive technology
- `aria-current="step"` tracks the active step for screen readers
- Arrow-key navigation moves up and down through the steps
- Dark/light theme toggle with smooth transitions
- Responsive layout that adapts down to 280px
- Fully respects `prefers-reduced-motion`

## Accessibility

- **Current step** — `aria-current="step"` set on the active step element
- **Live readout** — `role="status"` with `aria-live="polite"` announces "Step X of N"
- **Step list semantics** — `role="list"` with `role="listitem"` on each step
- **Keyboard navigation** — Arrow Up/Down (and Left/Right) move between steps; Back/Next are native buttons
- **Button labels** — Every button has an explicit `aria-label`
- **Theme toggle** — `role="switch"` with `aria-checked` toggled by JS
- **Focus indicators** — `:focus-visible` with `--ring` outline on all interactive elements
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations

## Keyboard shortcuts

- `ArrowDown` — Advance to the next step
- `ArrowUp` — Return to the previous step
- `Enter` — Activate the focused button or theme toggle
- `Space` — Activate the focused button or theme toggle
- `Tab` — Move focus between the theme toggle and Back/Next buttons

## Common questions

**Which frameworks is Vertical Stepper available in?**

Vertical 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 Vertical Stepper navigation component free?**

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

**Does Vertical Stepper support dark mode?**

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

## Get the code

Preview Vertical 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/vertical-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