Timeline

Data Display

Progress

Display a sequence of events or steps with status indicators and connecting lines.

Preview

Task workflow timeline

Task CreatedDec 1, 2024

New task added to Marketing Strategy project

Assigned to OliviaDec 1, 2024

Task assigned with high priority

In ProgressDec 1, 2024

Work has started on this task

ReviewEst. Dec 2

Pending team review

CompletedEst. Dec 3

Task marked as done

Compact Variant

Minimal timeline with smaller indicators

Project KickoffJan 15

Initial planning

Design PhaseFeb 1

UI/UX design

DevelopmentMar 1

Implementation

TestingApr 15

QA and bug fixes

LaunchMay 1

Production deployment

Status Types

Eight status types with different colors and icons

Completed Status2 days ago

Task finished

Current StatusNow

In progress

Warning StatusToday

Requires attention

Error Status1 hour ago

Failed

Pending StatusTomorrow

Waiting

Activity Variant

AI actions style with icons, status badges, and confidence scores

Auto-assigned Customer Support Ticket #4521

Auto-approved2 min ago94%

Suggested budget allocation Q4 Marketing Campaign

Approved15 min agoby Alex Kim78%

Generated report Weekly Performance Summary

Auto-approved1 hour ago96%

Risk flagged Unusual access pattern detected

Pending2 hours ago67%

Task reassignment Project Alpha deliverable

Rejected3 hours agoby Jordan Lee45%

Props

Component API reference

Timeline

Prop	Type	Default	Description
`items*`	`TimelineItem[]`	—	Array of timeline items
`variant`	`'default' \| 'compact' \| 'activity'`	`'default'`	Visual style variant
`className`	`string`	—	Additional CSS classes

TimelineItem Type

Prop	Type	Default	Description
`title*`	`string`	—	Item title
`description`	`string`	—	Item description
`date`	`string`	—	Date or time label
`status`	`'completed' \| 'current' \| 'pending' \| 'error' \| 'warning' \| 'auto' \| 'approved' \| 'rejected'`	`'pending'`	Status indicator
`icon`	`LucideIcon`	—	Custom icon (overrides status icon)
`statusLabel`	`string`	—	Status label text (activity variant)
`confidence`	`number`	—	Confidence percentage 0-100 (activity variant)
`meta`	`string`	—	Additional meta text like "by John Doe" (activity variant)

Usage

Import and implementation examples

import { Timeline, type TimelineItem } from '@/components/ui/timeline'

const items: TimelineItem[] = [
  {
    title: 'Task Created',
    description: 'New task added to project',
    date: 'Dec 1, 2024',
    status: 'completed'
  },
  {
    title: 'In Progress',
    description: 'Work has started',
    date: 'Dec 2, 2024',
    status: 'current'
  },
  {
    title: 'Review',
    description: 'Pending review',
    date: 'Est. Dec 3',
    status: 'pending'
  }
]

// Default timeline
<Timeline items={items} />

// Compact variant
<Timeline items={items} variant="compact" />

// Activity variant (AI actions style)
const aiActions: TimelineItem[] = [
  {
    title: 'Auto-assigned',
    description: 'Support Ticket #4521',
    status: 'auto',
    statusLabel: 'Auto-approved',
    date: '2 min ago',
    confidence: 94,
  },
  {
    title: 'Budget allocation',
    description: 'Q4 Marketing Campaign',
    status: 'approved',
    statusLabel: 'Approved',
    date: '15 min ago',
    confidence: 78,
    meta: 'by Alex Kim',
  },
  {
    title: 'Risk flagged',
    description: 'Unusual access pattern',
    status: 'pending',
    statusLabel: 'Pending',
    date: '2 hours ago',
    confidence: 67,
  },
]

<Timeline items={aiActions} variant="activity" />

Features

Built-in functionality

3 variants: Default, compact, and activity visual styles
8 status types: Completed, current, pending, error, warning, auto, approved, rejected
Status-specific icons: Check, dot, alert, bot, and clock icons per status
Connecting lines: Visual connection between timeline items
Activity variant features: Status badges, confidence scores, and meta text
Custom icons: Override default status icons with custom Lucide icons
Dark mode: Full dark mode support with adjusted colors

Accessibility

Accessibility considerations

ARIA Attributes

Uses ordered list for semantic structureStatus icons have aria-hiddenStatus communicated via text and color

Keyboard Navigation

Key	Action
`N/A`	Timeline is not interactive by default

Notes

Screen readers announce items in order
Status is communicated via text, not just color
Clear visual distinction between statuses

Related Components

Progress Stepper List Item