# Timeline 06

> A simple timeline block with changelog

A shadcn/ui block from the [@shadcnui-blocks](https://shadcnui-blocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnui-blocks/timeline-06).

- Page, with a live preview: https://shadcn.exchange/r/shadcnui-blocks/timeline-06
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnui-blocks/timeline-06-light-125a534b1ef9f972.png
- Registry item: https://shadcnui-blocks.com/r/timeline-06.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnui-blocks.com/r/timeline-06.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Files

### `src/registry/blocks/shared/timeline-06/components/timeline.tsx`

```tsx
const changelog = [
  {
    title: "Initial Release",
    description:
      "Launched the first version with core features and basic UI components.",
    version: "1.0.0",
    date: "2025-03-01",
  },
  {
    title: "UI Enhancements",
    description:
      "Improved the user interface with better accessibility and design consistency.",
    version: "1.1.0",
    date: "2025-03-05",
  },
  {
    title: "Performance Optimization",
    description:
      "Reduced load times and improved overall application performance.",
    version: "1.2.0",
    date: "2025-03-10",
  },
  {
    title: "New Feature: Dark Mode",
    description:
      "Added support for dark mode, allowing users to switch themes seamlessly.",
    version: "1.3.0",
    date: "2025-03-15",
  },
  {
    title: "Bug Fixes & Security Patch",
    description:
      "Fixed various minor bugs and patched security vulnerabilities.",
    version: "1.3.1",
    date: "2025-03-18",
  },
  {
    title: "New Components Added",
    description:
      "Introduced new UI components for better customization and flexibility.",
    version: "1.4.0",
    date: "2025-03-22",
  },
  {
    title: "Major Update: API Integration",
    description:
      "Integrated external APIs to enhance functionality and data synchronization.",
    version: "2.0.0",
    date: "2025-04-01",
  },
];

export default function Timeline() {
  return (
    <div className="max-w-(--breakpoint-sm) px-6 py-12 md:mx-auto md:py-20">
      <div className="relative">
        {/* Timeline line */}
        {/* <div className="absolute left-0 top-3 bottom-0 border-l-2" /> */}

        {changelog
          .reverse()
          .map(({ title, description, date, version }, index) => (
            <div className="group relative" key={index}>
              {/* Content */}
              <div className="flex items-start">
                <div className="mt-3 mr-5 flex w-[75px] shrink-0 flex-col gap-2 text-end sm:w-[90px]">
                  <h6 className="font-semibold text-primary text-sm">
                    v{version}
                  </h6>
                  <span className="text-muted-foreground text-xs sm:text-sm">
                    {date}
                  </span>
                </div>
                <div className="relative space-y-1 border-l pb-10 pl-6 group-last:pb-4 sm:pl-8">
                  {/* Timeline Dot */}
                  <div className="absolute top-4 -left-px h-3 w-3 -translate-x-1/2 rounded-full border-2 border-primary bg-background" />

                  <h3 className="mt-2 font-medium text-lg tracking-[-0.01em]">
                    {title}
                  </h3>
                  <p className="text-muted-foreground text-sm sm:text-base">
                    {description}
                  </p>
                </div>
              </div>
            </div>
          ))}
      </div>
    </div>
  );
}
```