Timeline

Buttons 59

About

Here is modern minimalistic timeline component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Timeline to your project and fits it to your theme.

Code

How Timeline is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { Timeline } from "@/components/ui/timeline";
import { Sparkles, Code } from "lucide-react";

export default function Example() {
  return (
    <Timeline
      items={[
        {
          date: "2024-01-07",
          title: "New Feature",
          description: "Added dark mode support",
          href: "/changelog/dark-mode",
          icon: <Sparkles className="h-3 w-3" />,
        },
        {
          date: "2024-01-05",
          title: "Bug Fix",
          description: "Fixed mobile navigation",
          href: "/changelog/mobile-nav",
          icon: <Code className="h-3 w-3" />,
        },        
        {
          date: "2024-01-07",
          title: "New Feature",
          description: "Added dark mode support",
          href: "/changelog/dark-mode",
          icon: <Sparkles className="h-3 w-3" />,
        },
        {
          date: "2024-01-05",
          title: "Bug Fix",
          description: "Fixed mobile navigation",
          href: "/changelog/mobile-nav",
          icon: <Code className="h-3 w-3" />,
        }
      ]}
      initialCount={3}
      showMoreText="Load More"
      showLessText="Show Less"
      dotClassName="bg-gradient-to-b from-background to-muted ring-1 ring-border"
      lineClassName="border-l border-border"
    />
  )
}