# Changelog page

> A complete changelog page built from Facade UI sections: a header, the releases with their changes, and an optional email sign-up. You supply one content object.

Facade UI item `changelog` (block, template).
Docs page: https://facadeui.dev/components/changelog · Registry JSON: https://facadeui.dev/r/changelog.json

## Install

```bash
npx shadcn@latest add @facade/changelog
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/changelog.json`. The CLI also installs what it needs: @facade/changelog-list, @facade/container, @facade/cta-group, @facade/footer, @facade/nav-top, @facade/newsletter, @facade/section, @facade/section-header, @facade/types.

Files: `components/templates/changelog.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/changelog-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

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

import { FOOTER_GROUPS, NAV_ITEMS, RELEASES } from "./content"

export function Demo() {
  return (
    <div className="-m-6 sm:-m-10">
      <Changelog
        currentPath="#changelog"
        content={{
          brand: "Facade UI",
          nav: [...NAV_ITEMS, { label: "Changelog", href: "#changelog" }],
          navActions: [{ label: "Get started", href: "#start" }],
          header: {
            eyebrow: "Changelog",
            title: "What is new in Facade UI",
            description: "New sections, fixes and the occasional breaking change.",
            actions: [
              { label: "RSS feed", href: "#rss", variant: "outline" },
              {
                label: "GitHub releases",
                href: "https://github.com",
                external: true,
                variant: "ghost",
              },
            ],
          },
          releases: RELEASES,
          subscribe: {
            title: "Get the next release by email",
            description: "One email per release. Nothing else.",
          },
          footer: {
            groups: FOOTER_GROUPS,
            copyright: "© 2026 Facade UI contributors",
          },
        }}
      />
    </div>
  )
}
```

## Props

### ChangelogProps

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `content` (required) | `ChangelogContent` |  |  |
| `link` | `LinkComponent` |  |  |
| `currentPath` | `string` |  | Marks the active nav item. |
| `banner` | `ReactNode` |  | Shown above the header. Usually a `Banner`. |
| `onSubscribe` | `(email: string) => void` |  | Wire this to your own form action or mutation. |
| `subscribeStatus` | `NewsletterStatus` |  |  |
| `subscribeError` | `string` |  |  |