# Roadmap

> A vertical milestone roadmap timeline with progress rings, completed/in-progress/upcoming states, action buttons, click and keyboard step focus, and a dark/light theme toggle — fully token-driven and design-system agnostic.

- Category: Roadmap
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Orchard
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: timeline, progress
- Page: https://builder.atheros.ai/components/roadmap
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_roadmap/preview-6b96f6fade6f.webp

## Features

- Full-width header card with a Tabler route icon, title with gradient emphasis, subtitle, status pips, and completion chip
- Vertical timeline rail with solid progress fill up to the focused milestone
- Dashed dim rail below for upcoming steps, faded at bottom edge
- Three progress-based states: completed (check node, green ring at 100%), in-progress (medium node, orange ring with percentage), upcoming (small hollow node)
- Separate focus concept — clicking a card focuses it (design-system-shaped pulse, directional rail tracer, elevated card) without changing status
- Figtree SVG progress rings with percentage centered inside, colored by status (green for completed, orange for in-progress)
- Action buttons on cards: "Continue" uses the active primary treatment; "Review" uses the active success treatment
- Header pips colored by status: green (completed), orange (in-progress), grey (upcoming)
- Header completion chip colored by overall progress: active design-system accent in progress, success when all complete
- Staggered fade-and-translate entrance for milestones
- Arrow key focus movement between milestones
- Dark/light theme toggle with smooth transitions
- Design-system switcher with 30+ brand themes
- Responsive layout down to 320px

## Accessibility

- **ARIA labels** — Every milestone button has an explicit `aria-label`
- **Active step** — `aria-current="step"` on the focused milestone button
- **List semantics** — `<ol role="list">` with `role="listitem"` children
- **Theme toggle** — `role="switch"` with `aria-checked` toggled by JS
- **Keyboard nav** — `ArrowUp`/`ArrowDown` move focus between milestones
- **Step activation** — Enter/Space and click activate a milestone
- **Focus indicators** — `:focus-visible` with `--ring` outline on all elements
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations
- **Viewport** — `100dvh` for mobile-safe viewport height

## Keyboard shortcuts

- `ArrowUp` — Focus previous milestone
- `ArrowDown` — Focus next milestone
- `Enter` — Activate focused milestone
- `Space` — Activate focused milestone

## Common questions

**Which frameworks is Roadmap available in?**

Roadmap 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 Roadmap free?**

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

**Does Roadmap support dark mode?**

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

## Get the code

Preview Roadmap 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/roadmap

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