A component to display a chronological sequence of events, perfect for changelogs, steps, or historical data.
Live Preview
Application UI code in Tailwind CSS
Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
Marketing UI design in Figma
All of the pages and components are first designed in Figma and we keep a parity between the two versions even as we update the project.
E-Commerce UI code in Tailwind CSS
Get started with dozens of web components and interactive elements built on top of Tailwind CSS.
Installation
npx kinetic-ui-cli@latest add timelineUsage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { Timeline } from "@/components/ui/timeline";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { Timeline } from "@/components/ui/timeline";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<Timeline
/>
</div>
);
}