Timeline

Content

Vertical chronological event list with date markers, titles, and descriptions. Used for project phases, changelogs, or historical records.

Code Example

<div className="space-y-6 relative before:absolute before:left-4 before:top-0 before:bottom-0 before:w-px before:bg-border">
  {events.map((event) => (
    <div key={event.id} className="flex gap-4 pl-10 relative">
      <div className="absolute left-2.5 top-1.5 w-3 h-3 rounded-full bg-primary border-2 border-background" />
      <div>
        <div className="text-xs text-muted-foreground">{event.date}</div>
        <div className="font-medium">{event.title}</div>
        <p className="text-sm text-muted-foreground">{event.description}</p>
      </div>
    </div>
  ))}
</div>

Variants (2)

Simple

Dot indicators with title and description

style= "simple"showDates= true

Phased

Color-coded phase blocks with expandable details

style= "phased"showDates= trueexpandable= true

Guidelines

Do

Show dates consistently (relative or absolute, not mixed)
Use color-coded indicators for event types
Keep descriptions to 1-2 lines
Most recent event first (reverse chronological)

Don't

Show more than 20 events without pagination or virtual scroll
Use timeline for non-chronological data
Mix different date formats in the same timeline
Place heavy content (images, charts) inline in timeline items

Use Cases

Project phase progression (PRT 4 phases)
Changelog / release history
Customer interaction history
Stewardship loop visualization

Details

Category: Content
Reference Component: Timeline
Variants: 2
Guidelines: 4 dos, 4 donts

Back to all patterns