Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Navigation component
A bare token-driven hexagon-trail stepper with clip-path hex nodes, a connecting accent trail, gradient-painted active and done nodes, done/active/upcoming states, and clickable steps that jump to any stage — themed by the AI Steppers design system in both light and dark.
aria-current="step" tracks the active step for screen readersprefers-reduced-motionaria-current="step" set on the active hex node elementrole="status" with aria-live="polite" announces "Step X of N"role="group" with aria-label="Setup steps" on the stepper container<button> with an explicit aria-labelaria-label:focus-visible with --ring outline on the focused hex node innerOpen Hex 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.
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.
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.
A bare token-driven chevron-path stepper whose four clip-path arrow segments lock into a connected rail — a flowing accent bar runs along the bottom of completed and current segments, and eyebrow micro-labels (“Step N” / “Done”) sit above each step title.
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.
A translucent five-slot mobile bottom bar floating on a tinted wash, where a frosted pane slides behind the active slot.
An icon-only mobile bottom bar where the chosen slot widens into a tinted tab and unfolds its label inline, its neighbours giving way.
Starting at $9.9 per month, billed annually
Don't miss a beat with our newsletter!
BUILDER
ABOUT US
© 2026 Atheros Intelligence Ltd.
prefers-reduced-motion: reduce disables all animations