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 timeline
• showDate: 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