Timeline

A customizable timeline component for displaying chronological events.

Manual Installation

Copy the timeline components into your project structure:

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

4# 2. Open the folder
5cd shadcn-timeline
6

7# 3. Install dependencies
8npm install
9

10# 4. Copy the timeline components to your project
11# Copy from:
12#   /src/app/components/timeline/timeline-layout.tsx
13#   /src/app/components/timeline/timeline.tsx

Usage

1# Add to your component:
2import { TimelineLayout } from "@/components/timeline/timeline-layout";
3

4# Copy the timeline components to:
5#   /src/components/timeline/timeline-layout.tsx
6#   /src/components/timeline/timeline.tsx

Examples

Basic

  1. Third event

    Sit culpa quas ex nulla animi qui deleniti minus rem placeat mollitia. Et enim doloremque et quia sequi ea dolores voluptatem ea rerum vitae.

  2. Second event

    Aut eius excepturi ex recusandae eius est minima molestiae. Nam dolores iusto ad fugit reprehenderit hic dolorem quisquam et quia omnis non suscipit nihil sit.

  3. First event

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Odio euismod lacinia at quis risus sed vulputate odio ut. Quam viverra orci sagittis eu volutpat odio facilisis mauris.

Custom Icon

  1. Third event

    Sit culpa quas ex nulla animi qui deleniti minus rem placeat mollitia. Et enim doloremque et quia sequi ea dolores voluptatem ea rerum vitae.

  2. Second event

    Aut eius excepturi ex recusandae eius est minima molestiae. Nam dolores iusto ad fugit reprehenderit hic dolorem quisquam et quia omnis non suscipit nihil sit.

  3. First event

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Odio euismod lacinia at quis risus sed vulputate odio ut. Quam viverra orci sagittis eu volutpat odio facilisis mauris.

Animated

  1. Third event

    Sit culpa quas ex nulla animi qui deleniti minus rem placeat mollitia. Et enim doloremque et quia sequi ea dolores voluptatem ea rerum vitae.

  2. Second event

    Aut eius excepturi ex recusandae eius est minima molestiae. Nam dolores iusto ad fugit reprehenderit hic dolorem quisquam et quia omnis non suscipit nihil sit.

  3. First event

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Odio euismod lacinia at quis risus sed vulputate odio ut. Quam viverra orci sagittis eu volutpat odio facilisis mauris.