Changelog32: Ruled Changelog

Releases as ruled rows with the version number and date pinned on the left while the title, the summary and the list of changes run down the right.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/changelog32?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/changelog32?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/changelog32.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

The installed file exports changelog32Demo alongside the block: the exact props behind the preview above. Spread it to get a working page in one line.

import { Changelog32, changelog32Demo } from "@/components/beste/block/changelog32";

export default function Page() {
  return <Changelog32 {...changelog32Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Changelog32 } from "@/components/beste/block/changelog32";

export default function Page() {
  return (
    <Changelog32
      eyebrow="Changelog"
      heading="What changed, and when."
      description="Every release, in order, with the small things included."
      buttons={[{ label: "Subscribe to updates", href: "/updates", tone: "outline" }]}
      entries={[
        {
          version: "2.4",
          date: "4 September 2026",
          title: "Motion that respects the reader",
          description: "Every entrance now checks the reduced motion setting before it moves.",
          changes: ["Reduced motion support across all sections", "Photographs wait for their file"],
        },
      ]}
    />
  );
}

Props

type Entry = {
  version: string;
  date: string;
  title: string;
  description: string;
  changes: string[];
};

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• The version column is sticky from the medium breakpoint up, so a long release stays labelled while you read to the end of its changes.
• Changes are a plain dotted list rather than tagged pills. A short label like Improved set in tracked small caps overflows its pill at some widths, which is why the set does not use them.
• The dot markers are aria-hidden spans rather than list-style bullets, which is what lets them sit on the first line of a change that wraps.
• Each release is an article with its own heading, so the page outlines correctly when there are twenty of them.
• The heading renders as an h1 because this block is built to be the whole changelog page rather than a section within one.
• All entries share one transition delay instead of a per-index stagger, since a long changelog would otherwise leave later releases arriving after they are already in view.
• Nothing here loads or listens: no image, no scroll handler, no timer.