docs / patterns / roadmap-timeline

RoadmapTimeline

shipped, in progress and next, as one row of cards under a connector track that fills up to where you are now.

intensity · structuresrsc · server

provenance

shaped from sisu-plus

layer

core / patterns

intensity

structures · organizes a region, stays out of the content

composition

a landing page roadmap or a docs release boardany milestone count; node positions come from the countnot a changelog. a milestone holds a handful of items, not a logat most one current milestone. the fill stops at the first it finds

a11y

milestones are an ordered list with real headings · the track is aria-hidden, the status pills say the same thing in wordsjest-axe
live demo · try it out
  1. 0.1Shipped

    Foundations

    Tokens, themes, and the first five primitives.

    • Semantic token roles
    • kajo and sisu themes
    • Registry pipeline
  2. 0.2In progress

    Patterns

    Composed blocks extracted from two live apps.

    • Bento grid
    • Page header
    • Roadmap timeline
  3. 0.3Planned

    Showcase

    The motion layer.

    • Fog sphere
    • Page transitions
customize
currentwhich milestone is in progress; earlier ones ship, later ones wait
2
itemsthe checklist inside each card
hideTrackdrops the connector track above the cards
headingLevellevel of each milestone title
usagecopy
import { RoadmapTimeline } from "@usva-ui/react/patterns/roadmap-timeline";

<RoadmapTimeline
  milestones={[
    { version: "0.1", status: "Shipped", title: "Foundations", tone: "done", items: [{ label: "Semantic token roles" }, { label: "kajo and sisu themes" }, { label: "Registry pipeline" }] },
    { version: "0.2", status: "In progress", title: "Patterns", tone: "current", items: [{ label: "Bento grid" }, { label: "Page header", featured: true }, { label: "Roadmap timeline" }] },
    { version: "0.3", status: "Planned", title: "Showcase", tone: "planned", items: [{ label: "Fog sphere" }, { label: "Page transitions" }] },
  ]}
/>

props

proptypedefaultnotes
milestonesRoadmapMilestone[]—each one is { version, status, title, body, items, tone }.
tone"done" | "current" | "planned""planned"per milestone. semantic, not decorative: it drives the connector fill, the card weight and the marker.
items{ label, featured? }[]—a featured item drops its marker and gets its own accent card.
markerIconReactNode—replaces the tick drawn inside a shipped item's marker.
headingLevel"h2" | "h3" | "h4""h3"level of each milestone title. pick it to fit the page outline.
hideTrackbooleanfalsehides the connector track above the cards.

get it

bun add @usva-ui/reactcopy
usagecopy
import { RoadmapTimeline } from "@usva-ui/react/patterns/roadmap-timeline";

<RoadmapTimeline
  milestones={[
    { version: "0.1", status: "Shipped", title: "Foundations", tone: "done" },
    { version: "0.2", status: "In progress", title: "Patterns", tone: "current" },
    { version: "0.3", status: "Planned", title: "Showcase", tone: "planned" },
  ]}
/>