Timeline

Displays a list of events or steps in chronological or sequential order.

Playground

Customize the Timeline properties to see different variations.

  1. 08:30 AM

    Event 1

    Having breakfast and preparing for the day.
  2. 10:00 AM

    Event 2

    Working on the project.
  3. 11:15 AM

    Event 3

    Meeting with the team to discuss progress.

Customize

Installation

pnpm dlx shadcn@latest add https://shadcn-ui-variants.vercel.app/r/timeline.json

Basic Usage

import { Timeline, TimelineBody, TimelineConnectorLine, TimelineContent, TimelineHeader, TimelineItem, TimelineNode, TimelineProps, TimelineSeparator } from "@/components/ui/timeline"
<Timeline> <TimelineItem> <TimelineSeparator> <TimelineNode /> <TimelineConnectorLine /> </TimelineSeparator> <TimelineContent> <TimelineHeader>Event 1</TimelineHeader> <TimelineBody>First Event</TimelineBody> </TimelineContent> </TimelineItem> <TimelineItem> <TimelineSeparator> <TimelineNode /> <TimelineConnectorLine /> </TimelineSeparator> <TimelineContent> <TimelineHeader>Event 2</TimelineHeader> <TimelineBody>Second Event</TimelineBody> </TimelineContent> </TimelineItem> </Timeline>

Examples

Default layout (right) with custom styles

  1. Order Received

    We have received your order.

  2. Payment Confirmed

    Your payment has been successfully processed.

  3. In Preparation

    Your order is being prepared.

  4. Shipped

    Your package is on its way!

Left layout

  1. Research

    Market and competition analysis.

  2. Prototyping

    Creation of initial models.

  3. Development

    Construction of the final product.

Alternate layout with icons and opposite content

  1. 09:00

    Project Started

  2. 10:30

    Component Created

  3. 11:15

    Tests Passed

  4. 11:45

    Bug Found

Complex body content and custom node

  1. OK

    Server A Updated

    Version 2.1.0 deployed.

    Success
  2. !

    Server B - Warning

    CPU usage at 85%.

    Warning
  3. OK

    Migrated Database

    Migration completed without errors.

    Success

Component Anatomy

The Timeline component utilizes a compound component pattern, allowing for flexible composition. Here's a breakdown of its parts:

  • <Timeline />

    The main wrapper (<ol>) component. It houses all timeline items and controls the overall layout via the position prop ("left", "right" (default), "alternate", "reverse-alternate").

  • <TimelineItem />

    Represents a single entry in the timeline. It should contain the necessary parts like TimelineContent and TimelineSeparator. The visual order of its children depends on the position prop of the parent Timeline.

  • <TimelineContent />

    The primary container (<div>) for the descriptive content associated with a timeline item. It typically holds TimelineHeader and TimelineBody. For default layout (position="right"), place this before TimelineSeparator in your JSX. For position="left", place it after.

  • <TimelineHeader />

    A semantic heading (<h3>) for the timeline event, placed inside TimelineContent.

  • <TimelineBody />

    The main container (<div>) for the body/details of the event. It can contain complex JSX structures, lists, code blocks, etc. Placed inside TimelineContent.

  • <TimelineSeparator />

    A container (<div>) that visually separates timeline items or aligns the node/line. It holds the TimelineNode and TimelineConnectorLine. Its placement relative to TimelineContent in the JSX determines the visual layout based on the position prop.

  • <TimelineNode />

    The visual marker (<div>) for the event point (e.g., a dot, icon). It's placed inside TimelineSeparator and can optionally contain children (like step numbers).

  • <TimelineConnectorLine />

    The vertical line (<span>) connecting different TimelineNodes. Placed inside TimelineSeparator. It should typically be omitted for the final TimelineItem in the list.

  • <TimelineOppositeContent />

    An optional container (<div>) used to add spacing on the side opposite the main content. It's primarily useful when using position="alternate" or position="reverse-alternate" to maintain consistent alignment.

Timeline Props

PropTypeDefault
position
enum"right"