opendraft

Components/Timeline

TimelineNew

Vertical event timeline with status markers that never rely on color alone, mono timestamps, a side time column on wide containers, expandable detail, collapsible long lists, and loading and empty states.

Open in Claude Open in ChatGPT

Incident, newest first, collapsible

  1. Completed: Incident resolved

    Error rate back under 0.1% for 30 minutes.
    Dana R., on-call

  2. In progress: Rollback in progress

    Reverting release 4.12.0 on all regions.
    Deploy pipeline

  3. Warning: Checkout latency degraded

    p95 above 4s, elevated 5xx from the payments service.
    Monitoring
    Details
    Alert: payments-api p95 > 2s for 5 minutes. Runbook: RB-204.

Shipment tracking, composable

  1. Completed: Order placed

    Online

  2. Completed: Departed facility

    Rotterdam, NL

  3. In progress: In transit

    Arriving at the local depot.
    Hamburg, DE
  4. Mar 13

    Upcoming: Out for delivery

  5. Mar 14

    Upcoming: Delivered

Loading

No history for this case

Installation

$npx shadcn@latest add @opendraft/timeline

Needs the @opendraft registry in your components.json. See Installation.

Dependencies

Source

The files the install command adds to your project. They're yours to edit.

PreviousRepeater FieldNext Alert