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

View on GitHub

See the full source code on GitHub

Related Components

View all
Accordion

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

Previous

Tag

Next

Tree