Editorial Revision Log

Changelog31: Editorial Revision Log

A revision log for writing rather than software, each entry dating the change, linking the piece it belongs to, stating what was altered and, where it exists, the reason on an accent rule.

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

Base UI flavor

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

This installs the block to components/beste/block/changelog31.tsx and the badge6 component it uses for the eyebrow (installed to components/beste/component/badge6.tsx).

Quick start

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

import { Changelog31, changelog31Demo } from "@/components/beste/block/changelog31";

export default function RevisionsPage() {
  return <Changelog31 {...changelog31Demo} />;
}

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

import { Changelog31 } from "@/components/beste/block/changelog31";

export default function RevisionsPage() {
  return (
    <Changelog31
      eyebrow="Revisions"
      heading="What changed after publishing"
      description="Pieces are corrected in place rather than quietly reposted."
      revisions={[
        {
          date: "14 March 2026",
          piece: "Writing an estimate you can defend",
          href: "/essays/estimates",
          change: "Rewrote the section on contingency and removed the worked example.",
          reason: "Three readers used the example as a rule, which is the opposite of the point.",
        },
      ]}
      note="Typos and broken links are fixed without a note."
    />
  );
}

Props

type Revision = {
  date: string;
  piece: string;
  href: string;
  change: string;
  reason?: string;
};

Behavior notes

• The reason is set apart on an accent rule rather than run into the change, so an entry reads as what happened first and why second.
• reason is optional. Entries without one are shorter rather than padded, which suits a log where most changes need no defence.
• Only the piece name is a link, so the entry itself is a record rather than a card.
• Order comes from the array. The block does not sort, so a newest-first log is a newest-first array.