Timeline

A vertical sequence of events or activity steps with connector lines.

ExamplesCodeUsageChangelog

Basic usage

Compose Timeline with TimelineItem components. Each item shows a dot, connector line, title, date, and body content.

Order placedJun 1, 2025

Your order #12345 was received and is being processed.

Payment confirmedJun 1, 2025

Payment of $149.00 was successfully processed.

ShippedJun 3, 2025

Your package is on its way. Tracking: 1Z999AA10123456784.

DeliveredJun 5, 2025

Package delivered to front door.

Tailwind v4

<Timeline>
  <TimelineItem title="Order placed" date="Jun 1, 2025" color="blue">
    Your order #12345 was received and is being processed.
  </TimelineItem>
  <TimelineItem title="Payment confirmed" date="Jun 1, 2025" color="green">
    Payment of $149.00 was successfully processed.
  </TimelineItem>
  <TimelineItem title="Shipped" date="Jun 3, 2025" color="blue">
    Your package is on its way. Tracking: 1Z999AA10123456784.
  </TimelineItem>
  <TimelineItem title="Delivered" date="Jun 5, 2025" color="default">
    Package delivered to front door.
  </TimelineItem>
</Timeline>

Dot colors

Use color to convey semantic meaning for each event.

Default

Gray dot — neutral or unknown state.

Blue

Blue dot — informational or in-progress.

Green

Green dot — success or completed.

Yellow

Yellow dot — warning or pending.

Red

Red dot — error or failed.

Tailwind v4

<Timeline>
  <TimelineItem title="Default" color="default">Gray dot — neutral or unknown state.</TimelineItem>
  <TimelineItem title="Blue" color="blue">Blue dot — informational or in-progress.</TimelineItem>
  <TimelineItem title="Green" color="green">Green dot — success or completed.</TimelineItem>
  <TimelineItem title="Yellow" color="yellow">Yellow dot — warning or pending.</TimelineItem>
  <TimelineItem title="Red" color="red">Red dot — error or failed.</TimelineItem>
</Timeline>

With icons

Pass an emoji or short string via the icon prop to display inside the dot.

✦

CreatedJan 10

Issue was created by the engineering team.

→

In reviewJan 12

Pull request opened and under review.

✓

MergedJan 14

Changes merged into main branch.

Tailwind v4

<Timeline>
  <TimelineItem title="Created" date="Jan 10" icon="✦" color="blue">
    Issue was created by the engineering team.
  </TimelineItem>
  <TimelineItem title="In review" date="Jan 12" icon="→" color="yellow">
    Pull request opened and under review.
  </TimelineItem>
  <TimelineItem title="Merged" date="Jan 14" icon="✓" color="green">
    Changes merged into main branch.
  </TimelineItem>
</Timeline>

Timeline Props

Prop	Type	Default	Description
—	—	—	No props. Acts as a layout wrapper.

TimelineItem Props

Prop	Type	Default	Description
title	string	undefined	Event title displayed above body content
date	string	undefined	Date or time string shown next to the title
icon	string	undefined	Emoji or short string shown inside the dot
color	'default' | 'blue' | 'green' | 'red' | 'yellow'	'default'	Dot color

Slots

TimelineItem

Slot	Description
default	Body content for the event