# Changelog

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

## Changelog (`changelog`, block)

Release notes on a Timeline: newest release highlighted, changes typed New / Improved / Fixed with Badges, and a Kbd shortcut to try the headline feature. Server-safe.

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

### API

- `<Changelog>`: Release notes on a Timeline: the newest release is the highlighted one, changes are typed with Badges, Kbd shows how to try it.
  - `releases: Release[]`: Newest first; the first one is highlighted.

- `type Release = { version: string; title: string; date: string; dateTime?: string; changes: Change[]; shortcut?: string[]; }`

### Usage

```tsx
<Changelog releases={[{ version: "v0.4", title: "Resizable", date: "Oct 24, 2026", dateTime: "2026-10-24", changes: [{ type: "new", text: "Split panes" }], shortcut: ["⌘", "K"] }]} />
```

### Example: changelog-page.tsx

```tsx
import { Changelog } from "@/components/blocks/changelog";

export function ChangelogPage() {
  return (
    <Changelog
      releases={[
        {
          version: "v2.1",
          title: "Faster search",
          date: "Oct 24, 2026",
          dateTime: "2026-10-24",
          changes: [
            { type: "new", text: "Search across every project from the command palette." },
            { type: "improved", text: "Results show up as you type." },
          ],
          shortcut: ["⌘", "K"],
        },
        {
          version: "v2.0",
          title: "Teams",
          date: "Oct 3, 2026",
          dateTime: "2026-10-03",
          changes: [{ type: "fixed", text: "Invites no longer expire early." }],
        },
      ]}
    />
  );
}
```