Deprecations And RemovalsPRO

Changelog30: Deprecations And Removals

A deprecation register listing what is being withdrawn on hairline rows with a tone-coded stage chip, the removal date, how many are still affected and the replacement, closing on the written notice policy.

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

Base UI flavor

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

This installs the block to components/beste/block/changelog30.tsx plus the badge23 and button21 components it uses for the eyebrow and the policy actions.

Quick start

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

import { Changelog30, changelog30Demo } from "@/components/beste/block/changelog30";

export default function DeprecationsPage() {
  return <Changelog30 {...changelog30Demo} />;
}

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

import { Changelog30 } from "@/components/beste/block/changelog30";

export default function DeprecationsPage() {
  return (
    <Changelog30
      badge={{ label: "Going away" }}
      heading="What we are removing, when, and what to use instead"
      description="Twelve months of notice on anything you could be depending on."
      stageLabels={{ announced: "Announced", warning: "Final year", removed: "Removed" }}
      columns={["What is going", "Stage", "Removed on", "Use instead"]}
      deprecations={[
        {
          what: "Per-site waiting list settings",
          detail: "The group model replaced this and keeping both would let two settings disagree.",
          stage: "warning",
          removesOn: "1 November 2026",
          announced: "Announced 14 May 2026",
          instead: "Group waiting list rules, with per-site overrides",
          affected: "31 practices still on the old settings",
        },
      ]}
      policyTitle="The deprecation policy"
      policyBody="Twelve months of notice as standard, never less than six."
      buttons={[
        { label: "Subscribe to deprecations", href: "/deprecations/subscribe" },
        { label: "Read the upgrade guides", href: "/docs/upgrades" },
      ]}
    />
  );
}

Props

type Stage = "announced" | "warning" | "removed";

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

type Deprecation = {
  what: string;
  detail: string;
  stage: Stage;
  removesOn: string;
  announced: string;
  instead: string;
  affected: string;
};

Behavior notes

• stage drives the chip colour from the stageStyles table: muted for announced, amber for the final year, rose for already removed. It also mutes the title of anything already gone, so the register reads as history at the bottom.
• stageLabels falls back to the raw key when a label is missing, so an incomplete record degrades to "warning" rather than rendering blank.
• instead and affected are both required. The block is built so nothing can be listed as going away without a replacement and a count of who is still on it.
• The column header row is hidden lg:grid, so on mobile the labels come from columns[2] and columns[3] rendered inline inside the date and replacement cells. Passing fewer than four column labels leaves those mobile labels blank.
• Because the header row is hidden below lg, its margin would collapse there. The rows container carries mt-12 lg:mt-0 to compensate, so the spacing above the register is correct at both widths.
• Rows use border-b matching the header's border-b, so the rules read as one continuous table.
• The chip is w-fit, so it hugs its label rather than filling the fixed 8rem grid track.
• Rows are lg:items-start rather than baseline-aligned, since the first cell carries three stacked lines and would otherwise drag the row out of alignment.