# Timeline

- Page: <https://kznlabs.github.io/labsUI/components/timeline>

## Timeline (`timeline`, component)

Server-safe ordered list of events on a rail: icon or dot markers with status colors, machine-readable <time>, title and an optional body. For changelogs, experience and mod logs.

- Install: `npx @kznlabs/labsui add timeline`
- Docs: <https://kznlabs.github.io/labsUI/components/timeline>
- Brings: utils
- npm: clsx@^2.1.1, tailwind-merge@^3.7.0

### API

- `<Timeline>` (+ <ol> props): Ordered list of events, newest or oldest first; the order is yours.
- `<TimelineItem>` (+ <li> props): One event: marker on the rail, then time, title and optional body (children).
  - `title: ReactNode`: Event headline.
  - `dateTime?: string`: Machine-readable date for `<time>`, e.g. "2026-10-21".
  - `icon?: ReactNode`: Icon inside the marker; without one the marker is a small dot.
  - `time?: ReactNode`: Shown above the title. Pair with `dateTime` to render a machine-readable <time>.
  - `variant?: "default" | "active" | "success" | "warning" | "destructive"` = `"default"`: Marker color.

### Usage

```tsx
<Timeline><TimelineItem icon={<Rocket />} variant="active" time="Oct 21" dateTime="2026-10-21" title="v0.3 released">Notes</TimelineItem></Timeline>
```

### Example: changelog.tsx

```tsx
import { GitMerge, Rocket } from "lucide-react";
import { Timeline, TimelineItem } from "@/components/ui/timeline";

export function Changelog() {
  return (
    <Timeline>
      <TimelineItem
        icon={<Rocket />}
        variant="active"
        time="Oct 21, 2026"
        dateTime="2026-10-21"
        title="v0.3 released"
      >
        Table, Input OTP, Timeline, Spinner and Aspect ratio.
      </TimelineItem>
      <TimelineItem icon={<GitMerge />} time="Oct 18, 2026" dateTime="2026-10-18" title="Merged #128" />
      <TimelineItem time="Sep 2, 2026" title="Project started" />
    </Timeline>
  );
}
```