Timeline

The Timeline component visually represents a sequence of events or milestones in either a vertical or horizontal layout.

Usage

Default

Project Kickoff
2025-01-01
Initial planning and stakeholder alignment.
Requirements Finalized
2025-02-15
All business and technical requirements approved.
Launch
2025-06-30
Product released to market.


<Timeline 
  orientation="vertical"
  items={[
    { title: "Project Kickoff", description: "Initial planning and stakeholder alignment.", date: "2025-01-01", icon: FaRocket },
    { title: "Requirements Finalized", description: "All business and technical requirements approved.", date: "2025-02-15", icon: FaCalendarAlt },
    { title: "Launch", description: "Product released to market.", date: "2025-06-30", icon: FaCheckCircle },
  ]}
/>

Props

Sortable data table
Prop	Type	Default	Description
items	TimelineItem[]	-	Array of timeline event objects to render, each containing `title`, `description`, `date`, and optionally an `icon`.
orientation	"vertical" \| "horizontal"	"vertical"	Defines the layout direction of the timeline.
theme	"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "clear"	Configured Default	Sets the color theme for timeline events.
rounding	"none" \| "small" \| "medium" \| "large"	Configured Default	Controls the border radius of timeline cards/events.
shadow	"none" \| "light" \| "medium" \| "strong" \| "intense"	Configured Default	Sets the shadow depth for timeline cards/events.
className	string	-	Custom class name for the timeline container.
data-testid	string	"timeline"	Test ID for the root element, useful for testing utilities.