Back to Components

Data

Timeline

Vertical chronological event list. Markers tinted by tone (default / success / warn / danger). Use for activity feeds, build logs, history rails.

Examples

Build log

  1. 4:32 pm

    Build started

  2. 4:34 pm

    Tests passed

    247 tests, 0 failures

  3. 4:35 pm

    Lint warning

    Unused import in src/utils.ts

  4. 4:38 pm

    Deploy failed

    API timeout — retry initiated

  5. 4:41 pm

    Deploy succeeded

<Timeline events={[
  {time: '4:32 pm', title: 'Build started'},
  {time: '4:34 pm', title: 'Tests passed', tone: 'success'},
  ...
]} />

Props

PropTypeDefaultDescription
events{time?, title, description?, tone?}[]Sequential events.

Install

CLI

npx @a3tai/mittsu add timeline