Timeline

Display a list of events in chronological order with customizable indicators and content.

Product Shipped

13th May 2021

We shipped your product via FedEx and it should arrive within 3-5 business days.

Order Confirmed

18th May 2021

Order Delivered

20th May 2021, 10:30am

tsx

import { 
  Timeline, 
  TimelineItem, 
  TimelineConnector, 
  TimelineIndicator, 
  TimelineSeparator, 
  TimelineContent, 
  TimelineTitle, 
  TimelineDescription 
} from "@/components/ui/timeline"
import { Check, Package, Truck } from "lucide-react"

export function TimelineDemo() {
  return (
    <Timeline>
      <TimelineItem>
        <TimelineConnector>
          <TimelineSeparator />
          <TimelineIndicator>
            <Truck className="h-4 w-4" />
          </TimelineIndicator>
        </TimelineConnector>
        <TimelineContent>
          <TimelineTitle>Product Shipped</TimelineTitle>
          <TimelineDescription>13th May 2021</TimelineDescription>
          <p className="text-sm text-muted-foreground mt-2">
            We shipped your product via <strong>FedEx</strong> and it should arrive within 3-5 business days.
          </p>
        </TimelineContent>
      </TimelineItem>
      
      <TimelineItem>
        <TimelineConnector>
          <TimelineSeparator />
          <TimelineIndicator>
            <Check className="h-4 w-4" />
          </TimelineIndicator>
        </TimelineConnector>
        <TimelineContent>
          <TimelineTitle>Order Confirmed</TimelineTitle>
          <TimelineDescription>18th May 2021</TimelineDescription>
        </TimelineContent>
      </TimelineItem>
      
      <TimelineItem>
        <TimelineConnector>
          <TimelineSeparator />
          <TimelineIndicator>
            <Package className="h-4 w-4" />
          </TimelineIndicator>
        </TimelineConnector>
        <TimelineContent>
          <TimelineTitle>Order Delivered</TimelineTitle>
          <TimelineDescription>20th May 2021, 10:30am</TimelineDescription>
        </TimelineContent>
      </TimelineItem>
    </Timeline>
  )
}

Installation

bash

npx fivui add timeline

Usage

tsx

import { 
  Timeline, 
  TimelineItem, 
  TimelineConnector, 
  TimelineIndicator, 
  TimelineSeparator, 
  TimelineContent, 
  TimelineTitle, 
  TimelineDescription 
} from "@/components/ui/timeline"

Examples

Sizes

Timeline supports four different sizes: sm, md, lg, and xl.

Small

Task Created

2 hours ago

Task Completed

1 hour ago

Large

Task Created

2 hours ago

Task Completed

1 hour ago

tsx

<Timeline size="sm">
  <TimelineItem>
    <TimelineConnector>
      <TimelineSeparator />
      <TimelineIndicator>1</TimelineIndicator>
    </TimelineConnector>
    <TimelineContent>
      <TimelineTitle>Task Created</TimelineTitle>
      <TimelineDescription>2 hours ago</TimelineDescription>
    </TimelineContent>
  </TimelineItem>
</Timeline>

<Timeline size="lg">
  <TimelineItem>
    <TimelineConnector>
      <TimelineSeparator />
      <TimelineIndicator>1</TimelineIndicator>
    </TimelineConnector>
    <TimelineContent>
      <TimelineTitle>Task Created</TimelineTitle>
      <TimelineDescription>2 hours ago</TimelineDescription>
    </TimelineContent>
  </TimelineItem>
</Timeline>

Variants

Timeline supports different visual variants: solid, subtle, outline, and plain.

Solid (Default)

Payment Processed

Just now

Outline

Payment Processed

Just now

Subtle

Payment Processed

Just now

Plain

Payment Processed

Just now

tsx

<Timeline variant="solid">
  <TimelineItem>
    <TimelineConnector>
      <TimelineSeparator />
      <TimelineIndicator>
        <Check className="h-4 w-4" />
      </TimelineIndicator>
    </TimelineConnector>
    <TimelineContent>
      <TimelineTitle>Payment Processed</TimelineTitle>
      <TimelineDescription>Just now</TimelineDescription>
    </TimelineContent>
  </TimelineItem>
</Timeline>

<Timeline variant="outline">
  {/* ... */}
</Timeline>

With Avatars

Timeline can be used with avatars for activity feeds and user interactions.

John Doe created a new project

2 hours ago

New comment added

1 hour ago

Great work on the new feature! Looking forward to the next iteration.

Task completed

30 minutes ago

Frontend

High Priority

tsx

import { Avatar } from "@/components/ui/avatar"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

<Timeline>
  <TimelineItem>
    <TimelineConnector>
      <TimelineSeparator />
      <TimelineIndicator className="p-0">
        <Avatar className="h-8 w-8">
          <img src="https://github.com/shadcn.png" alt="User" />
        </Avatar>
      </TimelineIndicator>
    </TimelineConnector>
    <TimelineContent>
      <TimelineTitle>John Doe created a new project</TimelineTitle>
      <TimelineDescription>2 hours ago</TimelineDescription>
    </TimelineContent>
  </TimelineItem>
  
  <TimelineItem>
    <TimelineConnector>
      <TimelineSeparator />
      <TimelineIndicator>
        <MessageSquare className="h-4 w-4" />
      </TimelineIndicator>
    </TimelineConnector>
    <TimelineContent>
      <TimelineTitle>New comment added</TimelineTitle>
      <TimelineDescription>1 hour ago</TimelineDescription>
      <Card className="mt-2">
        <CardContent className="p-3">
          <p className="text-sm">Great work on the new feature!</p>
        </CardContent>
      </Card>
    </TimelineContent>
  </TimelineItem>
</Timeline>

Content Before Indicator

You can place content before the timeline indicator by adding additional TimelineContent components.

Nov 1994

Project Started

Initial planning phase completed

Dec 1994

Development Phase

Core features implemented

Jan 1995

Launch

Product successfully launched

tsx

<Timeline>
  <TimelineItem>
    <TimelineContent className="w-auto">
      <TimelineTitle className="whitespace-nowrap">Nov 1994</TimelineTitle>
    </TimelineContent>
    <TimelineConnector>
      <TimelineSeparator />
      <TimelineIndicator>1</TimelineIndicator>
    </TimelineConnector>
    <TimelineContent>
      <TimelineTitle>Project Started</TimelineTitle>
      <TimelineDescription>Initial planning phase completed</TimelineDescription>
    </TimelineContent>
  </TimelineItem>
</Timeline>

API Reference

Timeline

The root timeline container component.

Prop	Type	Default	Description
variant	"solid" \| "subtle" \| "outline" \| "plain"	"solid"	The visual variant of the timeline
size	"sm" \| "md" \| "lg" \| "xl"	"md"	The size of the timeline indicators
className	string	-	Additional CSS classes

TimelineItem

A single timeline item container.

Prop	Type	Default	Description
className	string	-	Additional CSS classes

TimelineIndicator

The circular indicator that marks each timeline point.

Prop	Type	Default	Description
className	string	-	Additional CSS classes

TimelineContent

The content area for each timeline item.

Prop	Type	Default	Description
className	string	-	Additional CSS classes