Timeline
A visual representation of events in chronological order.
Default
Vertical timeline with dots connected by a line and event details.
Order placed
Your order has been successfully placed
2 hours ago
Payment confirmed
Payment has been processed and confirmed
1 hour ago
Shipped
Package has been handed to the carrier
30 min ago
Out for delivery
Your package is on its way to you
5 min ago
With Icons
Timeline with icon circles instead of simple dots for each event.
Order placed
Your order has been successfully placed
2 hours ago
Payment confirmed
Payment has been processed and confirmed
1 hour ago
Shipped
Package has been handed to the carrier
30 min ago
Out for delivery
Your package is on its way to you
5 min ago
Alternating
Timeline with events alternating between left and right sides of the center line.
Order placed
Your order has been successfully placed
2 hours ago
Payment confirmed
Payment has been processed and confirmed
1 hour ago
Shipped
Package has been handed to the carrier
30 min ago
Out for delivery
Your package is on its way to you
5 min ago
With Cards
Timeline where each event is displayed inside a bordered card with optional actions.
Order placed
Your order #12345 has been successfully placed and is being processed.
View order details2 hours ago
1 hour ago
30 min ago
Out for delivery
Your package is on a delivery vehicle and will arrive today.
5 min ago
Status Colors
Timeline with different status colors indicating completed, current, and upcoming events.
Order placed
Your order has been successfully placed
2 hours ago
Payment confirmed
Payment has been processed and confirmed
1 hour ago
Shipped
Package has been handed to the carrier
30 min ago
Out for delivery
Your package is on its way to you
Pending