Changelog

Preview

Install

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

   npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/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 @txbrendan/theme

3. 3. Add the website component. 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 @txbrendan/changelog

Props

• releases

  The releases, newest first. date is an ISO date. version also gives the release its id, "2.4" as "2-4", unless you pass id. cover fills a 16:9 frame. Each change has a type and its words. With none, it says there are no releases yet.

  { date: string; version?: string; id?: string; title: ReactNode; summary?: ReactNode; cover?: ReactNode; changes?: { type: "new" | "improved" | "fixed" | "removed"; text: ReactNode }[] }[] · default []

• limit

  Shows this many first, then a Show older releases button that shows the rest. With none, every release shows.

  number

• filter

  Adds tabs over the list, All and one per type of change your releases have. It needs two types or more.

  boolean · default false

• locale

  The language the dates are written in, like "en-GB" or "de-DE".

  string · default "en-US"

• className

  Extra classes on the root, which holds the container query. The date column sits beside each release from 48rem of its own width, and above it when narrower. Set --changelog-offset here.

  string

• ChangelogRelease

  Type. One release.

  { date: string; version?: string; id?: string; title: ReactNode; summary?: ReactNode; cover?: ReactNode; changes?: ChangelogChange[] }

• ChangelogChange

  Type. One change in a release.

  { type: "new" | "improved" | "fixed" | "removed"; text: ReactNode }

Accessibility

• The releases are an ordered list, newest first. Each is an article named by its title, an h2, so put the list under the page's h1.
• Each date is a <time> with the ISO date in dateTime.
• Each change's type is written on its badge, so it never rests on color alone.
• The tabs are named "Type of change". Arrow keys move between them. When the list changes, screen readers hear how many releases are left.
• Show older releases is a real button. Once pressed, it goes away and focus moves to the first release it showed, which sits where the button was.
• The hover fill is for the pointer only. Nothing in a release takes focus by itself.
• Reduced motion keeps the fades and drops the slides and the height glide.
• In forced colors each cover keeps a border, since its fill is painted away.

Examples

<Changelog
  releases={[
    {
      date: "2026-10-28",
      version: "2.4",
      title: "Shared views",
      summary: "Save a filtered view of any list and share it with your team.",
      cover: <ThemeLayers />,
      changes: [
        { type: "new", text: "Save any filter as a view." },
        { type: "improved", text: "Column widths stay put when you switch views." },
        { type: "fixed", text: "Sorting by date no longer puts empty dates first." },
      ],
    },
    {
      date: "2026-10-14",
      version: "2.3",
      title: "Faster search",
      changes: [{ type: "improved", text: "Results show as you type." }],
    },
  ]}
/>

<Changelog releases={releases} limit={5} filter />

<Navbar floating {...navbar} />
<main className="mx-auto flex max-w-7xl flex-col gap-16 px-4 pt-12">
  <Headline as="h1" align="start" title="Changelog" description="New features, improvements, and fixes." />
  <Changelog releases={releases} limit={5} filter />
</main>

<Changelog releases={releases} locale="en-GB" className="[--changelog-offset:1rem]" />