Timeline

Display a list of events in chronological order.

Basic Usage

• 2024-01-01
  Project Started

  Initial commit and setup.
• 2024-02-15
  Beta Release

  Released first beta version.
• 2024-03-10
  Feedback Collection

  Gathering user feedback.

Example

Horizontal

Use the direction="horizontal" prop to display the timeline horizontally.

• Step 1
  Order Placed
• Step 2
  Processing
• Step 3
  Shipped
• Step 4
  Delivered

Example

Custom Styles & Variants

You can customize the dots and connectors using variant and color props. You can also use custom icons for dots.

• Done
  Completed Step

  This step is fully complete.
• In Progress
  Current Step

  Working on this right now.
• Pending
  Upcoming Step

  Waiting for previous steps.
• Failed
  Failed Step

  Something went wrong here.

Example

Center Position

Use the position="center" prop to display the timeline alternately on both sides.

• 2023
  Company Founded

  Started with a small team of 3 people.
• 2024
  Series A Funding

  Secured $5M in Series A funding.
• 2025
  Global Expansion

  Opened offices in Europe and Asia.
• 2026
  IPO

  Successfully went public.

Example

API

BrTimeline

Props

Name	Type	Default	Description
direction	'vertical' | 'horizontal'	'vertical'	The orientation of the timeline
position	'left' | 'right' | 'center'	'right'	The position of the timeline content relative to the axis
color	string	'default'	Default color for all dots and connectors in the timeline

BrTimelineItem

Props

Name	Type	Default	Description
last	boolean	false	Set to true for the last item to hide its connector line

BrTimelineDot

Props

Name	Type	Default	Description
variant	'dot' | 'circle' | 'square' | 'icon'	'circle'	The visual style of the dot
color	string	'default'	The color of the dot

BrTimelineConnector

Props

Name	Type	Default	Description
variant	'solid' | 'dashed' | 'dotted' | 'none'	'solid'	The style of the connector line
color	string	-	Custom color for the connector line

BrTimelineContent

A container for the main content of the timeline item.

BrTimelineTime

A container for the timestamp or label of the timeline item.