Timeline

This is a Timeline component.

2023-01-01

Item 1 Content

2023-02-01

Item 2 Content

2023-03-01

Item 3 Content

2023-04-01

Item 4 Content

2023-05-01

Item 5 Content

Installation

1. Dependencies

npm install clsx tailwind-merge framer-motion

2. Paste inside @/lib/utils.ts

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: Parameters<typeof clsx>) {
  return twMerge(clsx(...inputs));
}

3. Copy Timeline Code

Copy Timeline Code

Timeline Props

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	undefined	The content of the timeline.
align	"left" \| "right" \| "alternate"	No	"left"	Alignment of the timeline.
className	string	No	undefined	Additional class names for styling.

TimelineItem Props

Name	Type	Required	Default	Description
children	React.ReactNode	Yes	undefined	The content of the timeline item.
date	string	No	undefined	The date of the timeline item.
icon	React.ReactNode	No	undefined	The icon to display in the timeline item.
color	string	No	undefined	The background color of the timeline item.
align	"left" \| "right"	No	"left"	Alignment of the timeline item.
className	string	No	undefined	Additional class names for styling.