Timeline

A timeline component that generates from react to minimal dom for best performance and a11y. Features optimized rendering, accessibility compliance, responsive design, and customizable styling options.

v0.0.1
🍰
🏃
🎓
Beginner
components
#react#css#tailwind

Timeline

Project Timeline

7:06pm
Latest update on the situation
5:21pm
'Terror, pure terror'
3:29pm
Victims in stable condition, police confirm
2:33pm
King pays tribute to victims
12:36pm
Watch: The video which appears to show how Liverpool rampage began
10:22am
PM: Whole country stands with Liverpool

News Timeline

27 May 2025
7:06pm
Latest update on the situation
5:21pm
'Terror, pure terror'
3:29pm
Victims in stable condition, police confirm
2:33pm
King pays tribute to victims
12:36pm
Watch: The video which appears to show how Liverpool rampage began
10:22am
PM: Whole country stands with Liverpool

Custom Timeline

27 May 2025
7:06pm
Latest update on the situation
5:21pm
'Terror, pure terror'
3:29pm
Victims in stable condition, police confirm
2:33pm
King pays tribute to victims
12:36pm
Watch: The video which appears to show how Liverpool rampage began
10:22am
PM: Whole country stands with Liverpool

Install

Requires a project with shadcn/ui initialized. Installs all 1 file and any listed registry dependencies.

npx shadcn@latest add https://manglekuo.com/showcase/r/timeline.json

Documentation

Timeline

A flexible timeline for sequences of events with optional dates, dots, and connecting lines.

Usage

import Timeline from '@/components/ui/timeline'; <Timeline  title="Project timeline"  keyMoments={[    { time: "10:00 AM", text: "Kickoff", href: "#kickoff" },    { time: "2:00 PM", text: "Review", href: "#review" },  ]}/>Language: jsx

Props

  • keyMoments (TimelineItem[], required): { time, text, href, date? }[]
  • title (string, optional): Heading above the timeline.
  • showDate (boolean, default: false): Show date column.
  • variant ("default" | "news", default: "default")
  • size ("sm" | "md" | "lg", default: "md")
  • showLines / showDots (boolean, default: true)
  • className (string, optional): Override CSS variables for colours and sizing.

CSS variables

Customise via className, e.g. [--dot-color:theme(colors.green.500)], [--line-width:2px], [--dot-size:12px].