Timeline
Display chronological events using customizable timeline items.
Import
import { Timeline } from "@shivms/ui";Sizes
Extra Small
First Event
Timeline item description.
Second Event
Another timeline item.
Third Event
Final timeline event.
Small
First Event
Timeline item description.
Second Event
Another timeline item.
Third Event
Final timeline event.
Medium
First Event
Timeline item description.
Second Event
Another timeline item.
Third Event
Final timeline event.
Large
First Event
Timeline item description.
Second Event
Another timeline item.
Third Event
Final timeline event.
Extra Large
First Event
Timeline item description.
Second Event
Another timeline item.
Third Event
Final timeline event.
Variants
Default
First Event
Timeline item description.
Second Event
Another timeline item.
Third Event
Final timeline event.
Primary
First Event
Timeline item description.
Second Event
Another timeline item.
Third Event
Final timeline event.
Success
First Event
Timeline item description.
Second Event
Another timeline item.
Third Event
Final timeline event.
Warning
First Event
Timeline item description.
Second Event
Another timeline item.
Third Event
Final timeline event.
Danger
First Event
Timeline item description.
Second Event
Another timeline item.
Third Event
Final timeline event.
Info
First Event
Timeline item description.
Second Event
Another timeline item.
Third Event
Final timeline event.
Orientation
Vertical
First Event
Timeline item description.
Second Event
Another timeline item.
Third Event
Final timeline event.
Horizontal
First Event
Timeline item description.
Second Event
Another timeline item.
Third Event
Final timeline event.
Alignment
Start
First Event
Timeline item description.
Second Event
Another timeline item.
Third Event
Final timeline event.
Center
First Event
Timeline item description.
Second Event
Another timeline item.
Third Event
Final timeline event.
End
First Event
Timeline item description.
Second Event
Another timeline item.
Third Event
Final timeline event.
Line Style
Solid
First Event
Timeline item description.
Second Event
Another timeline item.
Third Event
Final timeline event.
Dashed
First Event
Timeline item description.
Second Event
Another timeline item.
Third Event
Final timeline event.
Dotted
First Event
Timeline item description.
Second Event
Another timeline item.
Third Event
Final timeline event.
Dot Variant
Filled
First Event
Timeline item description.
Second Event
Another timeline item.
Third Event
Final timeline event.
Outlined
First Event
Timeline item description.
Second Event
Another timeline item.
Third Event
Final timeline event.
States
Default
First Event
Timeline item description.
Second Event
Another timeline item.
Third Event
Final timeline event.
Loading
First Event
Timeline item description.
Second Event
Another timeline item.
Third Event
Final timeline event.
Disabled
First Event
Timeline item description.
Second Event
Another timeline item.
Third Event
Final timeline event.
Content
Icon
Project Created
The project repository was initialized.
First Commit
Initial project structure committed.
Deployment
Application deployed successfully.
Avatar
AS
Aditya Sharma
Created a new project.
RK
Rohit Kumar
Reviewed pull request.
PM
Priya Mehta
Updated documentation.
Badge
Completed
Done
Task finished successfully.
In Progress
Active
Currently under development.
Cancelled
Failed
Task was cancelled.
Examples
Order Tracking
Order Placed
Your order has been received.
Packed
Items packed and ready.
Shipped
Package left the warehouse.
Delivered
Order delivered successfully.
Project Timeline
AS
Planning
Requirements finalized.
RK
Development
Core modules completed.
PM
Testing
QA validation finished.
AS
Launch
Production deployment.