Timeline

The Timeline component displays a series of events or milestones in a vertical layout, perfect for changelogs, roadmaps, and project histories.

Usage

Code

mdx

1<Timeline>
2  <TimelineItem title="First Event">
3    Description of the first event.
4  </TimelineItem>
5 
6  <TimelineItem title="Second Event">
7    Description of the second event.
8  </TimelineItem>
9</Timeline>

Live Examples

Basic Timeline

The team gathered to define the project scope and initial requirements. Created wireframes and design mockups for the application interface. Built the core features and integrated the backend services. Deployed the application to production and announced the public release.

Timeline with Dates

Initial release with core documentation features including versioning and search. Added Timeline component, improved sidebar navigation, and bug fixes. Major update with API playground, enhanced theming, and plugin system.

Props

Timeline

Prop	Type	Default	Description
`children`	`Snippet`	required	TimelineItem components

TimelineItem

Prop	Type	Default	Description
`title`	`string`	required	Event title/heading
`date`	`string`	—	Optional date or time label
`children`	`Snippet`	required	Event content

Features

Automatic Numbering — Events are numbered automatically using CSS counters
Visual Connector — A vertical line connects all events in sequence
Date Labels — Optionally display dates or time periods for each event
Rich Content — Each event supports full MDX content including code blocks and components

Tip

Use Timeline for changelogs, release histories, and project roadmaps. For step-by-step instructions, use the Steps component instead.

Documentation

Timeline

Usage

Live Examples

Basic Timeline

Timeline with Dates

Props

Timeline

TimelineItem

Features