Skip to content

Changelog Page

beta

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.

Preview

Changelog. What is new, better, and fixed.

Every release, newest first.

  1. Version 3.11

    Shared views

    Save a filtered view of any list and share it with your team. Everyone sees the same columns and order.

    • NewSave any filter as a view, and pin it to the sidebar.
    • NewShare a view with a link. People without access see a request page.
    • ImprovedColumn widths stay put when you switch views.
    • FixedSorting by date no longer puts empty dates first.
  2. Version 3.10

    Faster search

    Search now answers as you type, across every workspace you belong to.

    • ImprovedResults show as you type.
    • NewSearch across every workspace from one box.
    • FixedSearching for a word with an accent finds it without the accent too.
  3. Version 3.9

    API keys per project

    Make a key that only reaches one project, and see when each key was last used.

    • NewKeys that reach only one project.
    • ImprovedEach key shows when it was last used.
    • RemovedKeys with no project. Move them to a project by December 1.
  4. Version 3.8

    Comments on files

    Leave a comment on any file, and mention a teammate to ask them to look.

    • NewComment on a file, and reply in a thread.
    • NewMention someone with @ to send them a notice.
    • FixedLong file names no longer push the preview off the page.

Try the newest release today.

Free for one team. No card needed.

See pricingStart free

Install

  1. 1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @arbokui in a public list that Arbokui does not control.

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

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

    npx shadcn@latest add @arbokui/theme

  3. 3. Add the template. It also adds every component it uses. Its own files go in your components folder, and they are yours to edit.

    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

    The Navbar's props. It floats as a pill once the page scrolls, and folds into a menu below 42rem.

    NavbarProps

  • header

    The headline at the top of the page. It renders as the page's one h1, at the start, lined up with the releases.

    HeadlineProps

  • changelog

    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.

    ChangelogProps

  • cta

    The closing band above the footer.

    CallToActionBandProps

  • footer

    The Footer's props.

    FooterProps

  • renderLink

    Draws every link in the navbar, the closing band, and the footer, unless a part sets its own.

    (props: NavbarLinkProps) => ReactNode · default a plain <a>

  • embedded

    Renders the content in a div, not a main, for a preview inside another page.

    boolean · default false

  • className

    Extra classes on the root, which holds the container query.

    string

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

<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",
  }}
/>