Latest Release SpotlightPRO

Changelog27: Latest Release Spotlight

A changelog that gives the newest version a split of its own, pairing a checked highlight list and two actions with an image tile floating live post-release figures, over the earlier versions as hairline rows.

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

Base UI flavor

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

This installs the block to components/beste/block/changelog27.tsx, the dashboard33 metrics piece it floats on the tile (installed to components/beste/piece/dashboard33.tsx), and the badge23 and button21 components it uses for the eyebrow and the actions.

Quick start

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

import { Changelog27, changelog27Demo } from "@/components/beste/block/changelog27";

export default function ChangelogPage() {
  return <Changelog27 {...changelog27Demo} />;
}

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

import { Changelog27 } from "@/components/beste/block/changelog27";
import { Dashboard33 } from "@/components/beste/piece/dashboard33";

export default function ChangelogPage() {
  return (
    <Changelog27
      badge={{ label: "Latest release" }}
      version="v3.4.0"
      date="14 May 2026"
      heading="One waiting list across every site"
      description="The largest change we have shipped since billing."
      highlights={[
        "Capacity is now modelled at group level while rooms stay per site",
        "Cancellations are offered to the whole waiting list in order",
      ]}
      media={
        <Dashboard33
          title="Since the release"
          range="14 to 31 May"
          items={[{ label: "Refilled", value: "84%", delta: "+46", direction: "up" }]}
        />
      }
      image={{ src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" }}
      buttons={[
        { label: "Read the release note", href: "/changelog/3-4-0" },
        { label: "See what changed for you", href: "/changelog/diff" },
      ]}
      previousTitle="Before this"
      previous={[
        {
          version: "v3.3.2",
          date: "02 May 2026",
          title: "Faster invoice export for large groups",
          summary: "Month-end exports went from ninety seconds to under four.",
          href: "/changelog/3-3-2",
        },
      ]}
    />
  );
}

Props

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

type Previous = {
  version: string;
  date: string;
  title: string;
  summary: string;
  href: string;
};

Behavior notes

• version and date are joined into one line with a middle dot at the top right of the header, opposite the eyebrow. Both are plain strings and neither is parsed or formatted, so the block stays free of server and client locale differences.
• The heading is the change in plain language rather than the version number, which is what makes the spotlight readable to someone who does not follow releases.
• Earlier releases are whole Link elements laid out as a three-track grid from md: version, date, then title and summary. Below md they stack in that same order.
• Those rows carry md:px-4 alongside the hover fill, so the highlight extends slightly past the text on wider screens.
• Version tokens use tabular-nums so the column stays aligned across different version lengths.
• The spotlight row is lg:items-center, so the tile stays centered against a copy column whose height varies with the number of highlights.
• Button tones are positional and not overridable: the first is primary, later ones are outline.