Timeline

Timeline displays a vertical sequence of events, milestones, or changes over time.

It uses a clean compound component API: Timeline + Timeline.Item.

Basic Usage

<Timeline>
  <Timeline.Item
    title="Project Kickoff"
    description="Initial architecture and specification review"
    date="June 2026"
  />
  <Timeline.Item
    title="Phase 1 Complete"
    description="Design tokens + Card component released"
    date="July 2026"
  />
  <Timeline.Item
    title="Phase 2 Complete"
    description="All 15 foundation components implemented"
    date="July 2026"
  />
</Timeline>

Project Kickoff

Initial architecture and specification review

June 2026

Phase 1 Complete

Design tokens + Card component released

July 2026

Phase 2 Complete

All 15 foundation components implemented

July 2026

Props (Timeline.Item)

Prop	Type	Default	Description
title	ReactNode	—	Event or milestone title
description	ReactNode	—	Supporting details
date	string	—	Date or time period
icon	ReactNode	—	Optional custom icon

Best Practices

• Keep descriptions concise
• Use consistent date formatting
• Works excellently inside Card

Related Components

• Step — For process/wizard steps
• Card — Great container for timelines

Next: Step →