Icon Stepper

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

Customise it with AI

Open Icon Stepper in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the navigation is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.