Event Timeline

A vertical "domain events" style timeline that renders a list of labeled events with toned status dots, optional descriptions, and monospaced timestamps connected by a vertical rule.

Default

Deployment Events

  1. Build succeeded

    All 42 tests passed with no warnings.

    2026-05-31T09:15:00Z
  2. Deployment started

    Uploading assets to production environment.

    2026-05-31T09:16:03Z
  3. Health check failed

    Service did not respond within 30 s — retrying.

    2026-05-31T09:17:45Z
  4. Rollback triggered

    Previous stable release restored automatically.

    2026-05-31T09:18:02Z
Live Feed

Live Event Feed

New events prepend to the top — most recent first.

  1. Request received

    POST /api/process — 1.2 KB payload

Rich Content

Rich JSX Content

title and description accept React.ReactNode — inline code, links, and formatted text all work.

  1. Pull request #482 merged

    Branch feat/dark-mode → main. Approved by 2 reviewers.

    2026-05-31T11:04:30Z
  2. CI pipeline #1093 failed

    Step lint exited with code 1. 3 errors found.

    2026-05-31T11:06:10Z
  3. Release v2.4.0 tagged

    Changelog generated and GitHub Release draft created.

    2026-05-31T11:30:00Z
Single Event

Single Event

A list with one item — no connector line is rendered below the last dot.

  1. Waiting for first event

    No activity recorded yet. Events will appear here as they occur.

Timestamps

With Timestamps

ISO timestamps are rendered in a monospace style below each event.

  1. Task queued

    Waiting for an available worker.

    2026-05-31T08:00:00Z
  2. Task started

    Worker picked up the job.

    2026-05-31T08:03:17Z
  3. Checkpoint saved

    Intermediate results written to storage.

    2026-05-31T08:11:44Z
  4. Task completed

    Output is ready to download.

    2026-05-31T08:19:02Z
Title Only

Title Only

Events without description or timestamp — minimal footprint.

  1. Account created
  2. Email verified
  3. Profile completed
  4. Two-factor enabled
  5. First login
Tones

All Tones

  1. Success tone

    Operation completed without errors.

  2. Info tone

    Background task is now running.

  3. Warning tone

    Approaching rate limit — 80 % used.

  4. Danger tone

    Authentication failed after 3 attempts.

  5. Neutral tone

    No tone specified — default appearance.

Installation

npx shadcn@latest add @byronwade/event-timeline

Props

PropTypeDefaultDescription
eventsTimelineEvent[]—Array of timeline event objects to render, each with a title, optional description, optional timestamp, and optional tone.
classNamestring—Additional CSS classes applied to the root <ol> element.