# Icon Stepper

> A bare token-driven horizontal stepper that uses rounded-square Tabler icon tiles, with gradient-painted active and done tiles, animated connectors, done/active/upcoming states, and clickable steps that jump to any stage — themed by the AI Steppers design system.

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

## Features

- Bare centered stepper — no panel card or button chrome
- Horizontal step row with rounded-square icon tiles, connectors, and done/active/upcoming states
- Each step shows an official 24×24 Tabler icon (upload, settings, brain, rocket) that stays visible through every state
- Active tile is painted with the brand two-color gradient and a gentle pulsing glow ring
- Done tile fills with the surface color, a gradient-end icon and border, and a subtle ring
- Connectors transition through done, bridge, and fade states as progress advances
- Done connectors carry a subtle animated shimmer sweep
- Clickable steps jump straight to any stage and re-render all states
- Visually-hidden live region announces "Step X of N" to assistive technology
- `aria-current="step"` tracks the active step for screen readers
- Arrow-key navigation moves forward and backward through the wizard
- Responsive layout that adapts down to 320px
- Fully respects `prefers-reduced-motion`

## Accessibility

- **Current step** — `aria-current="step"` set on the active step element
- **Live readout** — Visually-hidden `role="status"` with `aria-live="polite"` announces "Step X of N"
- **Step list semantics** — `role="list"` with `role="listitem"` on each step
- **Clickable steps** — Each step is a native `<button>` with an explicit `aria-label`
- **Decorative icons** — Each tile icon carries `aria-hidden="true"`
- **Keyboard navigation** — Arrow Left/Right move between steps
- **Button labels** — Every step button has an explicit `aria-label`
- **Focus indicators** — `:focus-visible` with `--ring` ring on the active step tile
- **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 step
- `Space` — Activate the focused step
- `Tab` — Move focus between the steps

## Common questions

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

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

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

**Does Icon Stepper support dark mode?**

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

## Get the code

Preview Icon 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/icon-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