Timeline
A flexible and customizable timeline component that displays a sequence of events with optional dates, dots, and connecting lines. Built with accessibility in mind and optimized for performance.
Features
- 📅 Optional date display
- 🎨 Multiple size variants (sm, md, lg)
- 🎯 Customizable dots and lines
- 🌈 Theme variants (default, news)
- 🔗 Link support for each timeline item
- 🎭 Fully customizable through CSS variables
- ♿ Built with accessibility in mind
Details
- Title: Timeline
- Author: Mangle Kuo
- GitHub: ghcpuman902
- Tags: react, css, tailwind
- Version: 0.0.1
- Complexity: beginner
- Category: components
Usage
import { Timeline } from './timeline'
// Basic usage
<Timeline
keyMoments={[
{
time: "10:00 AM",
text: "Meeting with team",
href: "#meeting"
}
]}
/>
// With all options
<Timeline
title="Project Timeline"
showDate={true}
variant="news"
size="lg"
showLines={true}
showDots={true}
className="[--dot-color:theme(colors.green.500)]"
keyMoments={[
{
date: "2024-03-20",
time: "10:00 AM",
text: "Meeting with team",
href: "#meeting"
}
]}
/>
Props
keyMoments
: Array of timeline items (Required)title
: Optional title for the timelineshowDate
: Show date at the top of timeline (default: false)variant
: Color scheme variant - default | 'news'size
: Size variant - 'sm' | md | 'lg'showLines
: Show connecting lines (default: true)showDots
: Show timeline dots (default: true)className
: Additional CSS classes
CSS Variables
You can customize the timeline appearance using CSS variables:
<Timeline
className="
[--dot-size:12px]
[--line-width:2px]
[--dot-color:theme(colors.green.500)]
[--line-color:theme(colors.green.500)]
[--text-color:theme(colors.green.950)]
[--hover-color:theme(colors.green.700)]
"
/>
--dot-size
: Size of timeline dots (default: 10px)--line-width
: Width of connecting lines (default: 2px)--dot-color
: Color of timeline dots (default: theme(colors.red.500))--line-color
: Color of connecting lines (default: theme(colors.red.500))--text-color
: Color of text (default: theme(colors.foreground))--hover-color
: Color of text on hover (default: theme(colors.foreground))
Example
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