Skip to main content

Timeline

Timeline presents chronological events as cards along a vertical line, with a title, time range, participants, and summary per event.

Example

<Timeline
  events={[
    {
      link: 'https://github.com/idea2app/Idea-React/releases',
      summary: 'Bootstrap 5 components with MobX 6.',
      time: [
        '2023-04-01'
      ],
      title: 'Idea React v2'
    },
    {
      link: 'https://github.com/idea2app/Idea-React/releases',
      people: [
        {
          avatar: 'https://github.com/idea2app.png',
          name: 'idea2app'
        }
      ],
      summary: 'Upgraded to Bootstrap 6 with official component wrappers.',
      time: [
        '2025-10-01'
      ],
      title: 'Idea React v3 alpha'
    }
  ]}
  timeFormat="YYYY-MM-DD"
/>

Usage

Each event takes a title, a time tuple of start and optional end, and optionally a summary, a link, and people rendered as Nameplates. timeFormat controls the Time labels.