Timeline

Vertical activity feed — markers on a spine, tone per event, timestamp column.

Timeline is the activity feed: one item per event, a status marker on a connecting spine, and a right-aligned timestamp slot. Purely presentational — feed it ordered data and it stays an ordered list.

Installation

import { Timeline, TimelineItem } from "@iammikz/srui";

Usage

  1. Deployed
    Build 128 is live on production.
    12:04
  2. Tests passed
    412 tests, 0 failures.
    12:01
  3. Build queued
    main @ a92e86b
    11:58
  4. Rollback
    Build 127 rolled back after error spike.
    09:30

Props

Timeline accepts ol props. TimelineItem:

PropTypeDefaultDescription
titleReactNode—The event (bold first line)
descriptionReactNode—Body copy
timeReactNode—Right-aligned timestamp
iconReactNode—Custom marker instead of the dot
variant"default" | "info" | "success" | "warning" | "destructive""default"Dot tone

Accessibility

An ol/li list — screen readers announce the event order; the spine and dots are decorative.

Upgrades over the PRUI original: the timestamp slot and per-item markers.