Timeline

Ready

Part of Data Display collection

Default Timeline

Full-featured timeline with icons, status indicators, and descriptions

Order PlacedDec 1, 2024

Your order has been successfully placed

Payment ConfirmedDec 1, 2024

Payment received and verified

ProcessingDec 1, 2024

Your order is being prepared

ShippedEst. Dec 2

Package handed to courier

DeliveredEst. Dec 3

Package delivered to address

Compact Timeline

Minimal version with smaller indicators, perfect for tight spaces

Project KickoffJan 15

Initial planning and team alignment

Design PhaseFeb 1

UI/UX design and prototyping

DevelopmentMar 1

Implementation in progress

TestingApr 15

QA and bug fixes

LaunchMay 1

Production deployment

Status Indicators

Five status types with different colors and icons

Completed Status2 days ago

Task finished successfully

Current StatusNow

Currently in progress

Warning StatusToday

Requires attention

Error Status1 hour ago

Failed with errors

Pending StatusTomorrow

Waiting to start

Features

Two variants: default and compact
Five status types (completed, current, pending, error, warning)
Status-specific icons and colors
Optional date badges
Connecting lines between items
Responsive design

Installation

Import the Timeline component and TimelineItem type:

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

Usage Examples

Basic Timeline

const items: TimelineItem[] = [
  {
    title: 'Order Placed',
    description: 'Your order has been placed',
    date: 'Dec 1, 2024',
    status: 'completed'
  },
  {
    title: 'Processing',
    description: 'Order is being processed',
    date: 'Dec 2, 2024',
    status: 'current'
  }
]

<Timeline items={items} />

Compact Variant

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

Without Descriptions

const items: TimelineItem[] = [
  { title: 'Step 1', status: 'completed' },
  { title: 'Step 2', status: 'current' },
  { title: 'Step 3', status: 'pending' }
]

<Timeline items={items} />

API Reference

Timeline Props

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

TimelineItem Type

Property	Type	Required	Description
title	string	Yes	Item title
description	string	No	Item description
date	string	No	Date or time label
status	'completed' \| 'current' \| 'pending' \| 'error' \| 'warning'	No	Status indicator (default: 'pending')