A beautiful, accessible, and customizable timeline component built on top of shadcn/ui with React and Tailwind CSS.

The same as shadcn/ui, all components are free to use for personal and commercial.

Just copy and paste to your project and customize to your needs. The code is yours.

• 🔗 View Storybook Documentation
• 🔗 Live Demo

• 🎨 Customizable appearance with different sizes and colors
• ♿️ Fully accessible with ARIA attributes
• 🔄 Loading and error states
• 🎭 Smooth animations with Framer Motion
• 📱 Responsive design
• 🎯 TypeScript support
• 🌐 SSR Compatible
• 📚 Full Storybook documentation and examples

# Clone the repository
git clone https://github.com/timDeHof/shadcn-timeline.git

# Install dependencies
npm install

# Run Storybook locally
npm run storybook

import { Timeline, TimelineItem } from '@/components/timeline';
import { Check } from 'lucide-react';

export default function Example() {
  return (
    <Timeline>
      <TimelineItem
        date={new Date('2024-01-01')}
        title="Feature Released"
        description="New timeline component is now available"
        icon={<Check />}
        status="completed"
      />
      <TimelineItem
        date={new Date('2024-01-02')}
        title="In Progress"
        description="Working on documentation"
        status="in-progress"
      />
      <TimelineItem
        date={new Date('2024-01-03')}
        title="Upcoming"
        description="Planning future updates"
        status="pending"
      />
    </Timeline>
  );
}

The component is fully SSR compatible and handles hydration properly. Date formatting is handled on the client side to prevent hydration mismatches.

To run Storybook locally:

npm run storybook

This will start Storybook on http://localhost:6006

Run the test suite:

# Run tests
npm run test

# Run Storybook tests
npm run test-storybook

# Run Storybook tests with coverage
npm run test-storybook:coverage

• Open an issue if you believe you've encountered a bug.
• Make a Pull request if you want to add a new feature/make quality of life improvements/ fix bugs.

MIT