Timeline

Starter

Vertical timeline display.

displayhistorytimeline

Import

import { Timeline, TimelineItem } from "@/components/ui";

Basic Usage

Timeline Preview

Order placed

Your order has been confirmed

10:30 AM

Processing

We are preparing your order

11:00 AM

Shipped

Your order is on the way

2:00 PM

Delivery pending

Expected by tomorrow

Estimated

Code

tsx

<Timeline>
  <TimelineItem
    title="Order Placed"
    description="Your order has been placed successfully."
    time="2 hours ago"
  />
  <TimelineItem
    title="Processing"
    description="Your order is being processed."
    time="1 hour ago"
  />
  <TimelineItem
    title="Shipped"
    description="Your order has been shipped."
    time="Just now"
  />
</Timeline>

With Icons

Add icons to timeline items

1<Timeline>
2  <TimelineItem
3    icon="ShoppingCart"
4    title="Order Placed"
5    description="Order #12345 was created"
6    time="Dec 15, 2024"
7  />
8  <TimelineItem
9    icon="Package"
10    title="Order Shipped"
11    description="Package left the warehouse"
12    time="Dec 16, 2024"
13  />
14  <TimelineItem
15    icon="Truck"
16    title="Out for Delivery"
17    description="Your package is on its way"
18    time="Dec 17, 2024"
19  />
20</Timeline>

Alternating

Items alternate sides

1<Timeline alternating>
2  <TimelineItem title="2020" description="Company founded" />
3  <TimelineItem title="2021" description="First product launch" />
4  <TimelineItem title="2022" description="Series A funding" />
5  <TimelineItem title="2023" description="Global expansion" />
6</Timeline>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring