Timeline

The example below loads live from Storybook; open it there to use the controls.

Live example, StorybookOpen in Storybook

Default

dateTime is written in the Provider language; time gives ready text. Tone sets the marker colour, icon replaces the dot.

1. Release stoppedNow

   A check failed.

2. Review requested27 Oct 2026, 16:05
3. Two people invited to the team26 Oct 2026, 11:20

   Invitations were sent by email.

4. Project created24 Oct 2026

LightDark

Copy code

import { Timeline, type TimelineItem, Provider } from '@bigbang/ui';

const items: TimelineItem[] = [
  { id: 'blocked', title: 'Release stopped', description: 'A check failed.', time: 'Now', tone: 'danger', icon: 'circle-alert' },
  { id: 'review', title: 'Review requested', dateTime: '2026-10-27T16:05:00', tone: 'info' },
  { id: 'invited', title: 'Two people invited to the team', description: 'Invitations were sent by email.', dateTime: '2026-10-26T11:20:00' },
  { id: 'created', title: 'Project created', dateTime: '2026-10-24', tone: 'success', icon: 'check' },
];

export default function Default() {
  return (
    <Provider locale="en-GB">
      <Timeline items={items} aria-label="History" className="max-w-lg" />
    </Provider>
  );
}

Extra content

An event’s children go under the description: a link, tags.

1. Two people invited to the team26 Oct 2026, 11:20

   Open details
2. Project created24 Oct 2026

LightDark

Copy code

import { Link, Timeline, type TimelineItem, Provider } from '@bigbang/ui';

const items: TimelineItem[] = [
  {
    id: 'invited',
    title: 'Two people invited to the team',
    dateTime: '2026-10-26T11:20:00',
    children: <Link href="#">Open details</Link>,
  },
  { id: 'created', title: 'Project created', dateTime: '2026-10-24' },
];

export default function Extra() {
  return (
    <Provider locale="en-GB">
      <Timeline items={items} aria-label="History" className="max-w-lg" />
    </Provider>
  );
}

Light and dark mode

Markers use the status backgrounds.

Light

1. Release stoppedNow

   A check failed.

2. Review requested27 Oct 2026, 16:05
3. Two people invited to the team26 Oct 2026, 11:20

   Invitations were sent by email.

4. Project created24 Oct 2026

Dark

1. Release stoppedNow

   A check failed.

2. Review requested27 Oct 2026, 16:05
3. Two people invited to the team26 Oct 2026, 11:20

   Invitations were sent by email.

4. Project created24 Oct 2026

Copy code

import { Timeline, type TimelineItem, Provider } from '@bigbang/ui';

const items: TimelineItem[] = [
  { id: 'blocked', title: 'Release stopped', description: 'A check failed.', time: 'Now', tone: 'danger', icon: 'circle-alert' },
  { id: 'review', title: 'Review requested', dateTime: '2026-10-27T16:05:00', tone: 'info' },
  { id: 'invited', title: 'Two people invited to the team', description: 'Invitations were sent by email.', dateTime: '2026-10-26T11:20:00' },
  { id: 'created', title: 'Project created', dateTime: '2026-10-24', tone: 'success', icon: 'check' },
];

export default function Default() {
  return (
    <Provider locale="en-GB">
      <Timeline items={items} aria-label="History" className="max-w-lg" />
    </Provider>
  );
}