Timeline
Data Display
Vertical timeline with custom markers, alternating layouts, and temporal data visualization
Basic Usage
Order Placed
2 hours ago
Your order has been placed successfully
Processing
1 hour ago
Your order is being prepared
Shipped
30 minutes ago
Your order is on the way
Variants
Outlined
Email Sent
5 minutes ago
Welcome email sent to user
Account Created
10 minutes ago
User account successfully created
Gradient
Project Started
Yesterday
Initial project setup complete
Milestone Reached
Today
50% completion achieved
Minimal
Task Created
1 day ago
New task added to the board
Task Completed
2 hours ago
Task marked as done
Positions
Left
Event 1
10:00 AM
Left aligned event
Event 2
11:00 AM
Another left aligned event
Right
Event 1
10:00 AM
Right aligned event
Event 2
11:00 AM
Another right aligned event
Alternate
Design Phase
Week 1
UI/UX design completed
Development
Week 2-3
Feature implementation in progress
Testing
Week 4
QA and bug fixes
Sizes
Small
Small Event
Now
Another Event
Later
Large
Large Event
Today
This is a larger timeline item
Another Event
Tomorrow
With more details
Usage Guidelines
When to Use
- Activity logs
- History displays
- Process steps
Accessibility
- Temporal sequence conveyed
- Events announced in order
Performance
- Static rendering
- CSS-based layout
Common Mistakes
- No dates on timeline events
- Inconsistent event sizes
Frequently Asked Questions
Timeline displays events in chronological order with custom markers and alternating layouts.
Yes, Timeline can alternate items left and right.
Related Components
View allAccordion
Collapsible content sections with single/multiple expansion modes, animation, and keyboard navigation
Avatar
User avatar with image loading, fallback text generation, status indicators, and shape variants
AvatarGroup
Stacked avatar display with overflow handling, max count configuration, and hover expansion
Badge
Status indicator with variant system, dot mode, positioning, and pulsing animation support