# Compact horizontal milestone timeline

> Compact horizontal milestone timeline

A shadcn/ui block from the [@reui](https://reui.io) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/c-timeline-12).

- Page, with a live preview: https://shadcn.exchange/r/reui/c-timeline-12
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-timeline-12-light-f2840df99d026186.png
- Registry item: https://reui.io/r/new-york-v4/c-timeline-12.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://reui.io/r/new-york-v4/c-timeline-12.json
```

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

## Dependencies

- npm packages: `cn`
- Registry items: `@reui/badge`, `@reui/timeline`

## Files

### `c-timeline-12.tsx`

```tsx
import { Badge } from "@/components/reui/badge"
import {
  Timeline,
  TimelineContent,
  TimelineDate,
  TimelineHeader,
  TimelineIndicator,
  TimelineItem,
  TimelineSeparator,
  TimelineTitle,
} from "@/components/reui/timeline"

import { cn } from "cn"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"

const releases = [
  {
    id: 1,
    version: "v1.0",
    date: "Jan 2025",
    title: "Initial Release",
    status: "released",
  },
  {
    id: 2,
    version: "v1.1",
    date: "Mar 2025",
    title: "Bug Fixes",
    status: "released",
  },
  {
    id: 3,
    version: "v2.0",
    date: "Jun 2025",
    title: "Major Update",
    status: "current",
  },
  {
    id: 4,
    version: "v2.1",
    date: "Sep 2025",
    title: "Improvements",
    status: "upcoming",
  },
]

export function Pattern() {
  return (
    <Timeline
      defaultValue={3}
      orientation="horizontal"
      className="w-full max-w-xl"
    >
      {releases.map((release) => (
        <TimelineItem key={release.id} step={release.id}>
          <TimelineHeader>
            <TimelineSeparator className="bg-input! group-data-[orientation=horizontal]/timeline:-top-6 group-data-[orientation=horizontal]/timeline:left-2.5 group-data-[orientation=horizontal]/timeline:w-[calc(100%-2.25rem)]" />
            <TimelineDate>{release.date}</TimelineDate>
            <TimelineTitle className="flex items-center gap-2">
              {release.version}
              {release.status === "current" && (
                <Badge variant="primary-light" size="sm">
                  Current
                </Badge>
              )}
            </TimelineTitle>
            <TimelineIndicator
              className={cn(
                "flex size-6 items-center justify-center border-none",
                release.status === "released" && "bg-emerald-500 text-white",
                release.status === "current" &&
                  "bg-primary text-primary-foreground",
                release.status === "upcoming" &&
                  "bg-muted text-muted-foreground"
              )}
            >
              {release.status === "released" ? (
                <IconPlaceholder
                  lucide="CheckIcon"
                  tabler="IconCheck"
                  hugeicons="Tick02Icon"
                  phosphor="CheckIcon"
                  remixicon="RiCheckLine"
                  className="size-3.5"
                />
              ) : release.status === "current" ? (
                <IconPlaceholder
                  lucide="PlayIcon"
                  tabler="IconPlayerPlay"
                  hugeicons="PlayIcon"
                  phosphor="PlayIcon"
                  remixicon="RiPlayLine"
                  className="size-3"
                />
              ) : (
                <IconPlaceholder
                  lucide="CircleIcon"
                  tabler="IconCircle"
                  hugeicons="CircleIcon"
                  phosphor="CircleIcon"
                  remixicon="RiCircleLine"
                  className="size-3"
                />
              )}
            </TimelineIndicator>
          </TimelineHeader>
          <TimelineContent className="text-xs">{release.title}</TimelineContent>
        </TimelineItem>
      ))}
    </Timeline>
  )
}
```