Timeline

Display ordered events, milestones, or process steps connected by a continuous line.

Overview

The Timeline component renders a sequence of items connected by a continuous line through their markers. It supports horizontal and vertical orientations, and automatically converts horizontal timelines to vertical on mobile.

Installation

pnpm dlx shadcn@latest add @slide-cn/timeline

npx shadcn@latest add @slide-cn/timeline

yarn dlx shadcn@latest add @slide-cn/timeline

bunx --bun shadcn@latest add @slide-cn/timeline

Demo

Horizontal (default)

Horizontal timeline — converts to vertical on mobile

Q1 2024

Defined scope and core architecture

Q1 2024

Defined scope and core architecture

Q2 2024

Built component library

Q2 2024

Built component library

Q3 2024

Public beta launch

Q3 2024

Public beta launch

Q4 2024

v1.0 GA release

Q4 2024

v1.0 GA release

Vertical left-aligned

Vertical timeline, left-aligned

2020

Founded the company and assembled the founding team.

2021

Shipped the first product to early adopters.

2022

Raised Series A and expanded to 30 people.

2023

Launched in 12 new markets.

Vertical alternating

Vertical timeline, alternating sides

Ideation

Defined the problem and validated with users.

Design

Created wireframes and high-fidelity mockups.

Build

Developed and iterated through three sprints.

Launch

Shipped to production with full monitoring.

Custom markers

Timeline with icon markers

Install

Add the component to your project.

Install

Add the component to your project.

Configure

Set up your theme and layout.

Configure

Set up your theme and layout.

Present

Ship your presentation.

Present

Ship your presentation.

Usage

import { Timeline } from "@/components/ui/slide-cn/timeline"

// Horizontal (default)
<Timeline>
  <Timeline.Item label="Q1 2024">Shipped v1</Timeline.Item>
  <Timeline.Item label="Q2 2024">Shipped v2</Timeline.Item>
  <Timeline.Item label="Q3 2024">Beta launch</Timeline.Item>
</Timeline>

// Vertical left-aligned
<Timeline orientation="vertical">
  <Timeline.Item label="2020">Founded the company</Timeline.Item>
  <Timeline.Item label="2021">First product shipped</Timeline.Item>
</Timeline>

// Vertical alternating
<Timeline orientation="vertical" align="center">
  <Timeline.Item label="Ideation">Defined scope</Timeline.Item>
  <Timeline.Item label="Design">Created mockups</Timeline.Item>
</Timeline>

// Custom markers (icons, numbers)
<Timeline>
  <Timeline.Item label="Step 1" marker={<CheckCircle />}>Done</Timeline.Item>
  <Timeline.Item label="Step 2" marker={<span>2</span>}>In progress</Timeline.Item>
</Timeline>

Reference

Timeline

Prop

Type

Timeline.Item

Prop

Type

Timeline

On this page