Version Rail Release Timeline

Changelog26: Version Rail Release Timeline

Release feed with a sticky version rail on the left that filters the list to a single release, beside hairline entries carrying a version and date line, tone-coded tags, an accent-bulleted highlight list, and an optional link into the full note.

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/changelog26?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/changelog26.tsx plus the badge23 and button21 components it uses for the eyebrow, the tags, and the archive action.

Quick start

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

import { Changelog26, changelog26Demo } from "@/components/beste/block/changelog26";

export default function ChangelogPage() {
  return <Changelog26 {...changelog26Demo} />;
}

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

import { Changelog26 } from "@/components/beste/block/changelog26";

export default function ChangelogPage() {
  return (
    <Changelog26
      badge={{ label: "Changelog" }}
      heading="What shipped, and what it changed"
      allLabel="Everything"
      items={[
        {
          version: "v4.2",
          date: "April 12, 2026",
          title: "Waitlists that fill their own gaps",
          description: "A cancelled slot now reopens to the waitlist in order.",
          tags: [{ label: "New", tone: "primary" }, { label: "Scheduling" }],
          highlights: ["Per-service waitlist rules", "Notice by email or SMS"],
          link: { label: "Read the release note", href: "/changelog/4-2" },
        },
        {
          version: "v4.1",
          date: "March 28, 2026",
          title: "Claims reconcile against payments",
          description: "Submitted claims match themselves to incoming payments.",
          tags: [{ label: "Improved", tone: "foreground" }],
        },
      ]}
      footnote={{
        label: "Older releases live in the full archive.",
        button: { label: "Browse all releases", href: "/changelog/archive" },
      }}
    />
  );
}

Props

type ActionLink = { label: string; href: string };

type Tag = {
  label: string;
  tone?: "muted" | "foreground" | "primary";
};

type Release = {
  version: string;
  date: string;
  title: string;
  description: string;
  tags?: Tag[];
  highlights?: string[];
  link?: ActionLink;
};

Behavior notes

• The rail filters rather than scrolls. Clicking a version sets local state and the feed renders only the release whose version matches, so nothing is anchored and no scroll position is manipulated.
• Filtering compares the raw version string, so two releases sharing a version string would both survive the filter. Keep the strings unique.
• The rail is a real <nav> with an <ul>, and every entry is a <button> carrying aria-pressed, so the current filter is announced rather than only coloured.
• Layout changes shape at md: the rail is a wrapping row of pills on mobile and becomes a sticky hairline column at lg (lg:sticky lg:top-24), which is why the pill borders are dropped in the desktop rail.
• Tags run through Badge23 with the tone passed straight through, so primary reads as the accent for new work, foreground for changes, and the default muted for the quieter ones.
• Highlights are a plain list with an accent dot as the marker, sized and offset to sit on the first line of each entry rather than an icon that would shift with the text.
• The version and date line inside each entry sits on one wrapping row, separated by a small dot, so the version token still reads as an identifier without pulling a second typeface into the block.