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

Data table
	Type	Description
aria-describedby	string	Optional aria-describedby for the timeline root.
aria-label	string	Accessible label for the timeline. Defaults to "Timeline".
aria-labelledby	string	Optional aria-labelledby for the timeline root. When provided, this should take precedence over "aria-label".
className	string	Additional CSS class names for custom styling.
data-testid	string	Optional test ID for testing purposes.
items	TimelineItem[]	Array of timeline items to display.
orientation	OrientationType	Orientation of the timeline. "vertical" \| "horizontal"
role	React.AriaRole	Optional role override for the root element. Defaults to "list" when not provided.
rounding	RoundingType	Rounding of the component. "none" \| "small" \| "medium" \| "large" \| "full"
shadow	ShadowType	Shadow style of the component. "none" \| "light" \| "medium" \| "strong" \| "intense"
theme	ThemeType	Theme to apply for styling. "primary" \| "secondary" \| "tertiary" \| "quaternary" \| "clear"