Timeline Steps
Open in
Default
Order placed
Your order #12345 has been confirmed.
Processing
Your items are being prepared for shipment.
Shipped
Your package is on its way.
With Icons and Status
Order confirmed
Your order and payment have been received.
Packed
Your items have been packed and labeled.
In transit
Your package is on its way to you.
Delivered
Estimated delivery tomorrow.
Activity Feed
CN
Sarah Chen commented on Issue #42
I think we should consider using a different approach for the authentication flow. Let me know your thoughts.
JD
John Doe merged pull request #123
Horizontal
Step 1
Create account
Step 2
Verify email
Step 3
Complete profile
Step 4
Get started

Features

  • Vertical and horizontal orientations
  • Multiple status states: default, completed, current, upcoming
  • Customizable icons with size variants (sm, default, lg)
  • Icon color variants: default, primary, secondary, destructive, outline
  • Connector line styles: solid, dashed, dotted
  • Built with CSS variables for easy theming
  • Fully composable component architecture
  • Works with avatars and custom content
  • Fully typed with TypeScript

Component Props

TimelineSteps

  • orientation - "vertical" | "horizontal" - Layout direction (default: "vertical")
  • position - "left" | "right" | "alternate" - Position of the timeline line

TimelineStepsItem

  • orientation - "vertical" | "horizontal" - Layout direction for the item
  • status - "default" | "completed" | "current" | "upcoming" - Visual status of the item

TimelineStepsConnector

  • orientation - "vertical" | "horizontal" - Direction of the connector line
  • variant - "default" | "dashed" | "dotted" - Line style
  • status - "default" | "completed" | "current" | "upcoming" - Visual status

TimelineStepsIcon

  • size - "sm" | "default" | "lg" - Icon size
  • variant - "default" | "primary" | "secondary" | "destructive" | "outline" - Icon style variant

Other Components

  • TimelineStepsHeader - Container for icon and title row
  • TimelineStepsContent - Container for description and time
  • TimelineStepsTitle - Title text component
  • TimelineStepsDescription - Description text component
  • TimelineStepsTime - Time/date display component

Usage

The TimelineSteps component is fully composable, allowing you to build various timeline layouts:

  • Order tracking: Show step-by-step order progress with status indicators
  • Activity feeds: Display user actions with avatars and timestamps
  • Process flows: Visualize multi-step workflows horizontally or vertically
  • Event history: Show chronological events with descriptions