Components

Timeline

Events in order along a rail: a marker, a title, a time and optional detail.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { Timeline } from '@bigbang/ui';
Source: Timeline.tsx
Storybook: Timeline · Playground

Timeline is in the @bigbang/ui package.

import { Timeline } from '@bigbang/ui';

<Timeline aria-label="History" items={[{ id: '1', title: 'Project created', dateTime: '2026-10-24', tone: 'success' }]} />;

Props

itemsRequired

Description: Events in the order to show them; put the newest first or last as the page needs.
Type: readonly TimelineItem[]

aria-label

Description: Accessible name of the list.
Type: string

aria-labelledby

Description: Id of the heading that names the list.
Type: string

className

Description: Added to the root element; use it for layout only.
Type: string

Each event takes id, title, dateTime, time, description, tone, icon and children.

Data attributes

data-component="timeline": on the list.
On an event: data-tone; data-part: marker, title, time, description.