Timeline

Events in order, with real dates. A rail on the left, meaning on the right.

Example

12 Sep 2026
v0.1. Foundation ships with Button, Badge, Alert.
5 Sep 2026
v0.2. Forms land with validation states.
29 Aug 2026
v0.3. Navigation across the board.

<Timeline label="Release history">
  <TimelineItem time="12 Sep 2026" datetime="2026-09-12">
    <p><strong>v0.1.</strong> Foundation ships.</p>
  </TimelineItem>
  ...
</Timeline>

Props

Prop	Type	Default	Description
`align` (Timeline)	`left \| alternate`	`left`	Alternate right-aligns even content on desktop.
`time / datetime`	`string`	-	Display date + machine date.
`dotLabel`	`string`	-	Names the dot as an image when it means something.

Accessibility

Real list with real time[datetime] elements.
Dots are decorative unless dotLabel gives them meaning.