Timeline

A timeline component that generates from react to minimal dom for best performance and a11y

v0.0.1
🍰
🏃
🎓
Beginner

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