Skip to content
Data Display

Timeline

Displays a series of events in chronological order — activity feeds, changelogs, order tracking, and audit logs. Compose items from time, title, and body slots, with an optional icon marker.

Sourcesrc/components/ui/timeline.tsx

  1. Shipped v1.3

    Blocks, the init CLI, and the theme generator landed.

  2. Migrated to Base UI

    Swapped the primitive layer from Radix to Base UI 1.6.

Import

import {
  Timeline,
  TimelineItem,
  TimelineDot,
  TimelineTime,
  TimelineTitle,
  TimelineBody,
} from "@mikenotthepope/substrateui"

Composition

Timeline
└── TimelineItem
    ├── TimelineDot
    ├── TimelineTime
    ├── TimelineTitle
    └── TimelineBody

With icons

  1. Deployed

    Release went out to production.

  2. Published

    Package pushed to npm.

  3. Merged

    Feature branch merged to main.

Accessibility

The timeline renders as an ordered list (<ol>/<li>), so assistive technology announces the sequence and count. Markers are decorative and hidden from screen readers; keep the meaning in the title and body text.

API Reference

PropTypeDefaultDescription
TimelineReact.ComponentProps<'ol'>—The rail container. Renders an ordered list with a vertical border.
TimelineItemReact.ComponentProps<'li'>—A single event. Position a TimelineDot inside it.
TimelineDot{ icon?: React.ComponentType }—Marker on the rail. Pass an icon to render a ringed badge instead of a dot.
TimelineTime / TimelineTitle / TimelineBodyReact.ComponentProps<...>—Timestamp, heading, and body copy slots for an item.