0

Timeline

PreviousNext

A visual representation of events in chronological order.

Project Initialized

Successfully set up the project repository and initial architecture.

Beta Release

Launched the beta version for early testers and feedback.

Official Launch

The platform is now live for all users worldwide.
import {
  Timeline,
  TimelineContent,

Examples

With Left-Aligned Dates

AI Engine Integration

Deep integration of advanced LLMs for real-time code generation and context-aware suggestions.

Collaborative Editing

Multi-user real-time collaboration with shared cursors and instant synchronization across workspaces.

Visual Theme Builder

Interactive interface for creating and managing custom design systems with automated CSS variable generation.

Enterprise Security

Role-based access control, SOC2 compliance audit, and enhanced data encryption protocols.
import {
  Timeline,
  TimelineContent,

With Custom Indicators

Order Placed

Your order has been received and is being processed.

Payment Confirmed

Transaction successful. Preparing for shipment.

Shipped

Your package is on its way. Track your delivery.

Delivered

Package successfully delivered to the recipient.
import { IconCheck } from "@tabler/icons-react"

import {

With Icons

Forked Repository

Forked the repository to create a new branch for development.

Pull Request Submitted

Submitted PR #342 with new feature implementation. Waiting for code review.

Comparing Branches

Received comments on PR. Minor adjustments needed in error handling.

Merged Branch

Merged the feature branch into the main branch. Ready for deployment.
import {
  IconGitCompare,
  IconGitFork,

Alternating Layout

Seed Funding

Product MVP

First Client

Series A

Global Expansion

import {
  Timeline,
  TimelineDate,

Horizontal Orientation

Source Code Checkout

12s

Successfully fetched latest changes from the main branch.

Dependency Installation

1m 45s

All npm packages installed and cached for future builds.

Unit & Integration Tests

Running

Running 142 test suites across the entire codebase...

Production Build

Pending

Optimizing assets and generating static site pages.

import { IconCheck, IconChevronRight, IconCircle } from "@tabler/icons-react"

import { Badge } from "@/components/ui/badge"

Horizontal with Top Indicators

Completed Beta Program
Completed Usability Testing
Initiated Design Phase
Completed Requirements Gathering
Started Project Kickoff
import {
  Timeline,
  TimelineContent,

Customized Timeline

Planning

Scope definition and resource planning.

Design

UI/UX design and prototyping.

Development

Core features implementation.
import {
  Timeline,
  TimelineContent,

Compact Roadmap

Kickoff

Defining project goals and core team selection.

Discovery

User research and requirements gathering phase.

Implementation

Core development and sprint execution.
"use client"

import {

Activity Feed

Production Deploy

success
a1b2c3d·main·42s

Staging Deploy

success
e4f5g6h·staging·38s

Preview Deploy

failed
i7j8k9l·feat/auth·1m 12s

Production Deploy

success
m0n1o2p·main·45s
import { IconCheck, IconX } from "@tabler/icons-react"

import { Badge } from "@/components/ui/badge"

Highlighting the Current Step

animate marks the step that is running right now — ping sends a halo out from the indicator, pulse fades it in and out. Both fire only where step === value, so setting the prop once inside a .map() is enough, and both sit behind motion-safe so a reader who prefers reduced motion sees a still indicator.

ping

Set up job

ubuntu-latest · 2s

Run actions/checkout@v4

Fetched 1 commit · 3s

Run bun test

142 of 214 suites passed

Post job cleanup

Queued

pulse

Set up job

ubuntu-latest · 2s

Run actions/checkout@v4

Fetched 1 commit · 3s

Run bun test

142 of 214 suites passed

Post job cleanup

Queued
import {
  Timeline,
  TimelineContent,

Installation

bunx --bun shadcn@latest add @ondo-ui/timeline

Usage

import {
  Timeline,
  TimelineContent,
  TimelineDate,
  TimelineHeader,
  TimelineIndicator,
  TimelineItem,
  TimelineSeparator,
  TimelineTitle,
} from "@/components/ui/timeline"
<Timeline>
  <TimelineItem step={1}>
    <TimelineHeader>
      <TimelineDate>March 2024</TimelineDate>
      <TimelineTitle>Project Initialized</TimelineTitle>
    </TimelineHeader>
    <TimelineIndicator />
    <TimelineSeparator />
    <TimelineContent>
      Successfully set up the project repository and initial architecture.
    </TimelineContent>
  </TimelineItem>
</Timeline>

API Reference

Timeline

The root component for the timeline.

PropTypeDefaultDescription
defaultValuenumber1The initial active step.
valuenumber-The current active step (controlled).
onValueChange(value: number) => void-Callback fired when the active step changes.
orientation"horizontal" | "vertical""vertical"The layout orientation of the timeline.
size"sm" | "default" | "lg""default"Scales the indicator, its icon, and the rail geometry together.

size sets --timeline-indicator, --timeline-icon and --timeline-rail, and the item's margin, the indicator's offset and the separator's length are all derived from them. Changing it moves the whole rail as one piece rather than leaving the dot and the line out of step.

TimelineItem

A single item in the timeline.

PropTypeDefaultDescription
stepnumber-Required. The step number for this item.

TimelineDate

The date or time label for a timeline item.

PropTypeDefaultDescription
classNamestring-Additional CSS classes for the date label.

TimelineTitle

The title for a timeline item.

PropTypeDefaultDescription
classNamestring-Additional CSS classes for the title.

TimelineIndicator

The visual indicator (usually a dot) for a timeline item.

PropTypeDefaultDescription
variant"default" | "muted" | "info" | "success" | "warning" | "destructive""default"Picks the indicator's color from the theme's semantic set.
fill"outline" | "solid""outline"Draws the indicator as a ring or as a disc.
animate"ping" | "pulse"-Emphasizes the step that is currently running.
classNamestring-Additional CSS classes for the indicator.

variant names the color and fill decides how it is applied, so the two are independent: any hue can be a ring or a disc. fill="solid" is what you want when the indicator holds an icon, since the icon needs a background to sit on.

Completion still deepens whichever you pick — an outline ring goes from faint to full, and a solid disc goes from tinted to filled.

animate only fires on the step where step === value, so you can set it once inside a .map() and just the running step will move. It is wrapped in motion-safe, so a reader who prefers reduced motion gets a still indicator.

TimelineSeparator

The line connecting timeline indicators.

PropTypeDefaultDescription
classNamestring-Additional CSS classes for the separator line.

TimelineHeader

A container for the date and title.

PropTypeDefaultDescription
classNamestring-Additional CSS classes for the header container.

TimelineContent

The main descriptive content for a timeline item.

PropTypeDefaultDescription
classNamestring-Additional CSS classes for the content container.