Latest release2.44 September 2026
Every entrance and parallax now checks the reduced motion setting before it moves. Photographs wait for their file before they blur in. Nothing else about the pages changes.
Earlier
The newest release gets a full row: a photograph that blurs in and drifts on scroll beside its version, date, serif title, paragraph, plain change list and a sliding-marker pill. Earlier releases follow as compact ruled rows (version, date, title, one line) that link out and tint on hover.
One release gets the room and the rest are a glance away: a photographed lead entry above a run of compact linked rows.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
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/changelog35?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/changelog35?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/changelog35.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.
The installed file exports changelog35Demo alongside the block: the exact props behind the preview above. Spread it to get a working page in one line.
import { Changelog35, changelog35Demo } from "@/components/beste/block/changelog35";
export default function Page() {
return <Changelog35 {...changelog35Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Changelog35 } from "@/components/beste/block/changelog35";
export default function Page() {
return (
<Changelog35
eyebrow="Changelog"
heading="The latest, then everything before it."
description="One release gets the room. The rest are a glance away."
buttons={[{ label: "Subscribe", href: "/updates", tone: "outline" }]}
latestLabel="Latest release"
latest={{
version: "2.4",
date: "4 September 2026",
title: "Motion that respects the reader",
description: "Every entrance now checks the reduced motion setting.",
changes: ["Reduced motion support across all sections"],
image: { src: "/photos/bay.jpg", alt: "A small rocky bay below a wooded hillside" },
button: { label: "Read the notes", href: "/changelog/2-4" },
}}
earlierLabel="Earlier"
earlier={[
{ version: "2.3", date: "21 Aug 2026", title: "Yearly pricing", summary: "Monthly and yearly switch.", href: "/changelog/2-3" },
]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | – | Small-caps line above the heading |
heading | string | – | Page heading, rendered as the h1 through Text1 |
description | string | – | Paragraph under the heading |
buttons | ActionButton[] | [] | Pill actions at the right end of the header |
latestLabel | string | – | Word marking the lead entry, before its version |
latest | Latest | – | The featured release, with its photograph |
earlierLabel | string | – | Small-caps label above the compact list |
earlier | Earlier[] | [] | Older releases as linked rows |
className | string | – | Extra classes for the outer <section> |
type Latest = {
version: string;
date: string;
title: string;
description: string;
changes: string[];
image: { src: string; alt: string };
button?: { label: string; href: string };
};
type Earlier = {
version: string;
date: string;
title: string;
summary: string;
href: string;
};
type ActionButton = {
label: string;
href: string;
tone?: "primary" | "light" | "dark" | "outline";
};onLoad handler and an img.complete test for cached images.article while the rows are a list, which is the right outline for a page where one release is the story.latest leaves a plain linked index.changelog34
Releases as points on a vertical line that draws itself in ink as the page scrolls: version and date on the left of the line, a serif title, a paragraph and a plain dotted list of changes on the right. Serif headline settles in word by word with a sliding-marker pill at the header's right end.
changelog28
A complete changelog grouped by month, each version on a hairline row beside its entries, every line tagged added, changed, fixed, or removed with its own tone.
changelog10
Compact single-line release rows with color-coded type dots, version tags, and a legend footer. Optimized for dense, scannable API changelogs.
changelog32
A changelog page section with a serif headline that settles in word by word and a sliding-marker pill at the right end of the header, then a ruled list of releases. Each release keeps its version number and date pinned on the left while the title, summary and a plain dotted list of changes settle in on the right.