# Changelog Pages

> Two full changelog pages: a sticky month rail that tracks your scroll with kind filters and a subscribe box, and a magazine-style issue with big release cards and expandable notes.

- Collection: Pages
- Tier: pro
- Docs: https://geturui.com/docs/changelog-pages
- Install: `npx shadcn@latest add @geturui-pro/changelog-pages`
- Dependencies: motion, lucide-react

## Variants

### Sidebar updates

Entries grouped by month with a sticky rail whose indicator glides to the month in view, New/Improved/Fixed filters and an email subscribe card.

Install: `npx shadcn@latest add @geturui-pro/changelog-pages-sidebar-updates`

```tsx
import { SidebarUpdates } from "@/components/pages/changelog-pages/sidebar-updates";

export default function ChangelogPage() {
  return (
    <SidebarUpdates
      product="Ledgerline"
      entries={[
        {
          id: "v3-8",
          date: "2026-09-24",
          version: "3.8",
          title: "Approval chains for large invoices",
          summary: "Route big invoices through up to four approvers.",
          changes: [{ kind: "new", text: "Approval chains with per-entity thresholds" }],
        },
      ]}
      onSubscribe={(email) => console.log(email)}
    />
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| product | `string` | "Ledgerline" | Product name above the heading. |
| heading | `string` | "Changelog" | Page heading. |
| description | `string` | — | Line under the heading. |
| entries | `ChangelogEntry[]` | — | Releases, newest first. Each has id, date, version, title, summary and changes of kind new | improved | fixed. |
| onSubscribe | `(email: string) => void` | — | Called with a valid email from the subscribe card. |
| className | `string` | — | Classes for the outer section. |

### Editorial updates

Release notes set like a magazine issue: a masthead, a lead release with oversized cover art and drop cap, a card grid with expandable notes and a pull quote.

Install: `npx shadcn@latest add @geturui-pro/changelog-pages-editorial-updates`

```tsx
import { EditorialUpdates } from "@/components/pages/changelog-pages/editorial-updates";

export default function ReleaseNotes() {
  return <EditorialUpdates publication="The Prism Ledger" issue="Issue 14 · Autumn 2026" />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| publication | `string` | "The Prism Ledger" | Masthead title. |
| issue | `string` | — | Issue line in the masthead. |
| releases | `EditorialRelease[]` | — | Releases with id, version, date, size ("major" | "minor" | "patch"), title, dek and notes. The first is the lead. |
| quote | `{ quote: string; name: string; role: string } | null` | — | Pull quote at the end. null hides it. |
| className | `string` | — | Classes for the outer section. |

## Accessibility

- Filters are radio groups or tabs with the selected state exposed; expandable notes use aria-expanded and aria-controls.
- Month and release navigation are real buttons that move focus-friendly scroll targets; dates use <time>.
- Filter crossfades and scroll jumps fall back to instant changes under reduced motion.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.