Timeline

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

Usage & Examples

Default

  • Project Kickoff

    Initial planning and stakeholder alignment.

  • Requirements Finalized

    All business and technical requirements approved.

  • Launch

    Product released to market.

default.tsx

<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 API

14 props
Columns
Timeline props API
Default
Description
aria-describedbystringNoaria—Optional aria-describedby for the timeline root.
aria-labelstringNoaria"Timeline"Accessible label for the timeline. Defaults to "Timeline".
aria-labelledbystringNoaria—Optional aria-labelledby for the timeline root. When provided, this should take precedence over "aria-label".
classNamestringNostyling—Additional CSS class names for custom styling.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
glassbooleanNopropsconfigured default glass setting (fallback: false)Applies a translucent frosted-glass treatment using the active theme palette.
itemsTimelineItem[]Yesprops—Array of timeline items to display.
loadingbooleanNopropsfalseWhether timeline item content should display skeleton placeholders. Markers and connector bars remain visible.
orientationOrientationTypeNoprops"vertical"Orientation of the timeline. "vertical" | "horizontal"
roleReact.AriaRoleNoaria"list"Optional role override for the root element. Defaults to "list" when not provided.
roundingRoundingTypeNostylingconfigured default rounding (fallback: "medium")Rounding of the component. "none" | "small" | "medium" | "large" | "full"
shadowShadowTypeNostylingconfigured default shadow (fallback: "light")Shadow style of the component. "none" | "light" | "medium" | "strong" | "intense"