# Changelog Page

> A whole changelog page, built from our website components: a floating navbar, a page title, every release newest first with tabs to narrow them to one type of change, a closing band, and a footer.

- Name: `changelog-page`
- Status: beta
- Categories: changelog, releases, marketing, page
- Files: the install writes `changelog-page.tsx`, and any part files named `changelog-page-*.tsx`, to your `components` alias, `@/components` by default. Edit them freely. They are yours.
- Other registry items: `@arbokui/navbar`, `@arbokui/headline`, `@arbokui/changelog`, `@arbokui/call-to-action-band`, `@arbokui/footer`. The install adds them.
- Gallery: https://arbokui.com/templates/changelog-page
- Registry item: https://arbokui.com/r/changelog-page.json

## Install

1. Add the registry to `components.json`. Do this first, once:

   ```bash
   npx shadcn@latest registry add "@arbokui=https://arbokui.com/r/{name}.json"
   ```

   The command writes this entry. You can also add it by hand:

   ```json
   {
     "registries": {
       "@arbokui": "https://arbokui.com/r/{name}.json"
     }
   }
   ```

   Without this step, the shadcn CLI looks up `@arbokui` in a public list that Arbokui does not control.

2. Add the theme once per app. It replaces your color tokens with ones checked for contrast:

   ```bash
   npx shadcn@latest add @arbokui/theme
   ```

3. Add the template. It also adds every component it uses:

   ```bash
   npx shadcn@latest add @arbokui/changelog-page
   ```

## Use it for

- The list of releases on a product site. Render it as the whole page, from your app's page file.
- Write every word in the props: one object for the navbar, the header, the changelog, the closing band, and the footer.
- Pass the releases newest first, each with a \`date\` and a \`version\`. The version gives each release an id, so a link to #3-10 lands on it.
- Set \`changelog.limit\` to show the newest few first, with a button that shows the rest in place.
- Mark each change New, Improved, Fixed, or Removed, so the tabs can narrow the list. Set \`changelog.filter\` to false to hide them.
- Pass your router's link once in \`renderLink\`. The navbar, the closing band, and the footer all use it. From a server page, render the page from a client file, since a server page cannot pass a function.
- Set \`embedded\` when you show the page inside another page, like a gallery, so it has no second main.

## Avoid it for

- Every small fix since the start. Keep the changes people would notice, and show the newest first.
- Two releases with the same version, since the version is also the release's id.

## Props

- `navbar`: `NavbarProps`. The Navbar's props. It floats as a pill once the page scrolls, and folds into a menu below 42rem.
- `header`: `HeadlineProps`. The headline at the top of the page. It renders as the page's one h1, at the start, lined up with the releases.
- `changelog`: `ChangelogProps`. Required. Changelog's props, like \`releases\` and \`limit\`. \`filter\` defaults to true here. Each release's title is an h2, right under the page's h1.
- `cta`: `CallToActionBandProps`. The closing band above the footer.
- `footer`: `FooterProps`. The Footer's props.
- `renderLink`: `(props: NavbarLinkProps) => ReactNode`. Default `a plain <a>`. Draws every link in the navbar, the closing band, and the footer, unless a part sets its own.
- `embedded`: `boolean`. Default `false`. Renders the content in a div, not a main, for a preview inside another page.
- `className`: `string`. Extra classes on the root, which holds the container query.

## Accessibility

- The content sits in a main landmark, between the navbar's nav and the footer, so skip links and screen readers find it.
- The header renders the page's one h1, and each release's title is an h2 under it.
- Each release has an id, so a link lands on it below the floating navbar.
- Each part keeps its own accessibility, listed on its page.

## Examples

### A short changelog page

```tsx
<ChangelogPage
  navbar={{ brand: "Workspace", links: [{ href: "/changelog", label: "Changelog", current: true }] }}
  header={{ title: "Changelog.", muted: "What is new, better, and fixed." }}
  changelog={{
    releases: [
      {
        date: "2026-10-28",
        version: "3.11",
        title: "Shared views",
        changes: [{ type: "new", text: "Save any filter as a view." }],
      },
      {
        date: "2026-10-14",
        version: "3.10",
        title: "Faster search",
        changes: [{ type: "fixed", text: "Accents no longer change the results." }],
      },
    ],
  }}
  footer={{
    brand: "Workspace",
    columns: [{ title: "Product", links: [{ href: "/changelog", label: "Changelog" }] }],
    legal: "© 2026 Workspace",
  }}
/>
```