Skip to content
Content

Timeline

Vertical activity feed with bullets and connecting lines.

React source Astro source Core source

Timeline

Display a chronological list of events with bullets and connector lines. Use activeIndex to mark progress through a flow — later items render as pending.

Examples

Default

  1. Created
    2 hours ago
    Issue opened
  2. In review
    1 hour ago
    Waiting on approval
  3. Merged
    Just now
    PR #42
Demo.tsxtsx
import { Timeline } from '@var-ui/react';

<Timeline activeIndex={1} tone="accent">
  <Timeline.Item
    title="Created"
    timestamp="2 hours ago"
    description="Issue opened"
    icon="check"
  />
  <Timeline.Item
    title="In review"
    timestamp="1 hour ago"
    description="Waiting on approval"
    icon="clock"
  />
  <Timeline.Item title="Merged" timestamp="Just now" description="PR #42" tone="success" icon="success" />
</Timeline>

Props

Accessibility

Timeline items render as an ordered list (<ol> / <li>). Bullets are decorative and marked aria-hidden when they contain no meaningful content.