Timeline Composition

What happened, in order. Server-safe, and an <ol> rather than a stack of divs — the order is a fact a screen reader reads out, not a visual convention.

Usage

  1. Invoice created

    09:12

    INV-1043 for Sarah Chen.

  2. Sent by email

    09:20

    Delivered to sarah@atlas.co.

  3. Payment failed

    11:04

    The bank declined the charge.

  4. Paid

    11:31

    Settled with a different card.

tsx
<Timeline entries={[  { time: '09:12', title: 'Invoice created', description: 'INV-1043', tone: 'brand' },  { time: '11:31', title: 'Paid', tone: 'success' },]} />

Do

Format the timestamps yourself; the library never decides what a date looks like in your product.

Don't

Use tone='danger' for every failure in a long history — the colour stops meaning anything by the fourth one.

Loading

Timeline.Skeleton holds the rail and the entry rhythm while the history loads.

Props

PropTypeDefaultNotes
entriesTimelineEntry[]—time, title, description, icon, tone. Newest first or oldest first is your call.