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 },
    ]}
  />

Visual variants

Themes

primary

  • Project Kickoff

    Initial planning and stakeholder alignment.

  • Requirements Finalized

    All business and technical requirements approved.

  • Launch

    Product released to market.

secondary

  • Project Kickoff

    Initial planning and stakeholder alignment.

  • Requirements Finalized

    All business and technical requirements approved.

  • Launch

    Product released to market.

tertiary

  • Project Kickoff

    Initial planning and stakeholder alignment.

  • Requirements Finalized

    All business and technical requirements approved.

  • Launch

    Product released to market.

quaternary

  • Project Kickoff

    Initial planning and stakeholder alignment.

  • Requirements Finalized

    All business and technical requirements approved.

  • Launch

    Product released to market.

Variants

solid

  • Project Kickoff

    Initial planning and stakeholder alignment.

  • Requirements Finalized

    All business and technical requirements approved.

  • Launch

    Product released to market.

outline

  • Project Kickoff

    Initial planning and stakeholder alignment.

  • Requirements Finalized

    All business and technical requirements approved.

  • Launch

    Product released to market.

glass

  • Project Kickoff

    Initial planning and stakeholder alignment.

  • Requirements Finalized

    All business and technical requirements approved.

  • Launch

    Product released to market.

Rounding

none

  • Project Kickoff

    Initial planning and stakeholder alignment.

  • Requirements Finalized

    All business and technical requirements approved.

  • Launch

    Product released to market.

medium

  • Project Kickoff

    Initial planning and stakeholder alignment.

  • Requirements Finalized

    All business and technical requirements approved.

  • Launch

    Product released to market.

large

  • Project Kickoff

    Initial planning and stakeholder alignment.

  • Requirements Finalized

    All business and technical requirements approved.

  • Launch

    Product released to market.

Shadows

none

  • Project Kickoff

    Initial planning and stakeholder alignment.

  • Requirements Finalized

    All business and technical requirements approved.

  • Launch

    Product released to market.

light

  • Project Kickoff

    Initial planning and stakeholder alignment.

  • Requirements Finalized

    All business and technical requirements approved.

  • Launch

    Product released to market.

strong

  • Project Kickoff

    Initial planning and stakeholder alignment.

  • Requirements Finalized

    All business and technical requirements approved.

  • Launch

    Product released to market.

visual-variants.tsx
// Themes

  <Timeline theme="primary" 
    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 },
    ]}
  />

  <Timeline theme="secondary" 
    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 },
    ]}
  />

  <Timeline theme="tertiary" 
    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 },
    ]}
  />

  <Timeline theme="quaternary" 
    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 },
    ]}
  />

// Variants

  <Timeline variant="solid" 
    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 },
    ]}
  />

  <Timeline variant="outline" 
    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 },
    ]}
  />

  <Timeline variant="glass" 
    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 },
    ]}
  />

// Rounding

  <Timeline rounding="none" 
    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 },
    ]}
  />

  <Timeline rounding="medium" 
    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 },
    ]}
  />

  <Timeline rounding="large" 
    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 },
    ]}
  />

// Shadows

  <Timeline shadow="none" 
    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 },
    ]}
  />

  <Timeline shadow="light" 
    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 },
    ]}
  />

  <Timeline shadow="strong" 
    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 },
    ]}
  />

Interaction states

Loading
interaction-states.tsx
// Loading

  <Timeline loading 
    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.
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"
shadowShadowTypeNostyling—Shadow style of the component. "none" | "light" | "medium" | "strong" | "intense"
testIdstringNopropsdataTestId ?? "timeline"Optional test ID for testing frameworks.