Timeline

tone: default, success, warning, danger.

Launched10:42
Rocket v1.4.0 to the moon
Gru approved the plan09:15
Banana shortageYesterday
The fridge was empty

Branched timeline. Give events a branch and the timeline draws lanes side by side, like a git graph. Events without a branch sit on the main lane; the first event of another branch splits off the lane named by forkFrom (the main lane by default), and an event with mergeFrom (one branch id or a list) joins those branches back in, ending them on its row. branches sets the lane order, the first being the main lane, and gives each one a label that is shown beside its first event.

Lair openedmainMon
Start freeze rayfeature/freeze-rayTue
Branched from main
Banana bug reportedTue
Fix banana roundinghotfix/banana-1.4.1Wed
Freeze ray doneWed
Lair upgradedThu
Hotfix merged
Freeze ray mergedFri
Gru approved

Horizontal. orientation="horizontal" runs the events left to right with the branch lanes stacked above them, and scrolls sideways when it does not fit. Everything else, including branches, works the same.

Lair openedMon
Start freeze rayfeature/freeze-rayTue
Branched from main
Banana bug reportedTue
Freeze ray doneWed
Freeze ray mergedThu
Gru approved

Props

Timeline

itemsTimelineItem[]
Events; tone is default | success | warning | danger. branch puts an event on a lane (default: the main lane), forkFrom names the lane a branch splits off, mergeFrom the branch id(s) that join here. See the TimelineItem table below.
orientation'vertical' | 'horizontal'
Default: 'vertical'
Top to bottom, or left to right with the branch lanes stacked above the events.
branches{ id, label? }[]
Lane order (the first is the main lane) and a label shown beside the first event of each branch.
classNamestring
Default: ''
Extra classes for the root element.

Timeline props
Prop	Type	Default	Description
`items`	TimelineItem[]	–	Events; `tone` is default \| success \| warning \| danger. `branch` puts an event on a lane (default: the main lane), `forkFrom` names the lane a branch splits off, `mergeFrom` the branch id(s) that join here. See the TimelineItem table below.
`orientation`	'vertical' \| 'horizontal'	`'vertical'`	Top to bottom, or left to right with the branch lanes stacked above the events.
`branches`	{ id, label? }[]	–	Lane order (the first is the main lane) and a label shown beside the first event of each branch.
`className`	string	`''`	Extra classes for the root element.

TimelineItem

keystring | number
Unique key of the event.
titleReactNode
Headline of the event.
descriptionReactNode
Text under the title.
timeReactNode
When it happened.
tone'default' | 'success' | 'warning' | 'danger'
Default: 'default'
Color of the marker.
branchstring
The branch (lane) this event sits on. Events without one sit on the main lane.
forkFromstring
On the first event of a branch: the branch it splits off from (default: the main lane).
mergeFromstring | string[]
Branch id(s) that join this event's branch here; each of them ends on this row.

TimelineItem props
Prop	Type	Default	Description
`key`	string \| number	–	Unique key of the event.
`title`	ReactNode	–	Headline of the event.
`description`	ReactNode	–	Text under the title.
`time`	ReactNode	–	When it happened.
`tone`	'default' \| 'success' \| 'warning' \| 'danger'	`'default'`	Color of the marker.
`branch`	string	–	The branch (lane) this event sits on. Events without one sit on the main lane.
`forkFrom`	string	–	On the first event of a branch: the branch it splits off from (default: the main lane).
`mergeFrom`	string \| string[]	–	Branch id(s) that join this event's branch here; each of them ends on this row.