Changelog
Freev1.0.0Release notes by month, filtered by type, with details, commands and links to each entry.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { Changelog } from "@/components/ui/notchset/blocks/changelog";
export function Updates() {
return (
<Changelog
release="RELAY 4.12 · OCT 02 2026"
entries={[
{ id: "v4-12-0", month: "October 2026", date: "OCT 02", version: "v4.12.0", type: "new", title: "Atlas 3 Flash is the default model", summary: "Quality up 7.5 points, cost per run down 65%." },
{ id: "v4-11-2", month: "September 2026", date: "SEP 24", version: "v4.11.2", type: "fixed", title: "Retries no longer send duplicate emails", summary: "send_email now passes an idempotency key." },
]}
linkFor={(e) => `https://relay.dev/changelog#${e.id}`}
/>
);
}Props
entries–{ id, month, date, version, type, title, summary, points?, image?, code? }[]Newest first. type is new, improved or fixed; id is the link anchor.
title / release–string / stringThe heading (also the section's name) and the line under it.
onSubscribe–(email) => PromiseAdds the subscribe field. Resolve to show SUBSCRIBED · UNDO; reject to mark the field.
linkFor–(entry) => stringThe link COPY LINK copies. Defaults to this page with the entry's id as the hash.
openMonths–numberHow many months start open (default 2); the rest start folded.
Anatomy
- Entries group by their month, in the order you pass them.
- Filters narrow every month at once; a month with nothing left hides.
- COPY LINK uses linkFor, or this page with the entry's id.
Changelogdata-slot="changelog"Header, filters and the months of entries.
Source
components/ui/notchset/blocks/changelog.tsx
Loading the code
Build for your project
Code/install build
Installation
Base UI
pnpm dlx shadcn@latest add https://beautiful-ui.dev/r/changelog.jsonRadix
pnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/changelog.jsonFree, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @beautiful-ui registry added, @beautiful-ui/<name> picks for you.
Install by hand
- 1. Add the packages
pnpm add class-variance-authority@^0.7 - 2. Copy the files to these paths (the source, or save them all as a .zip)
- components/ui/notchset/blocks/changelog.tsx
- lib/beautiful-ui/notchset/instrument.tsx
- lib/beautiful-ui/notchset/root.ts
- lib/beautiful-ui/notchset/button-variants.ts
- 3. No stylesheet needed.
- 4. Install what it builds on first: shadcn's cn helper (lib/utils.ts, from npx shadcn init), the theme foundation (its tokens and base styles)
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- A public page of what shipped, for users who check before upgrading
- Release notes where fixes matter as much as features
Use something else when
- Long launch posts with images throughout: use a blog layout
- An in-app what's-new popover: use Notifications
Mistakes to avoid
- Keep ids stable across releases; shared links point at them
- Write summaries for users, not commit messages
Agents find it by
- changelog, release notes, what's new, product updates, version history, updates page, Notchset
Where agents read it
- Guide for this component: https://beautiful-ui.dev/md/changelog.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://beautiful-ui.dev/api/mcp(setup)
Behaviour
Keyboard
- Enter / Space
- Fold a month, open an entry, toggle a filter
- Tab
- COPY and COPY LINK inside an open entry
- Enter
- Subscribe from the email field
Accessibility
- Months and entries are headings and buttons that report aria-expanded; folded content is inert, so its buttons are skipped
- Filters are toggle buttons (aria-pressed) in a named group; the entry count is announced
- Each entry is an article with its id as the anchor, so a copied link lands on it
Motion
- Months and entries
- Unroll in 360ms and fold in 240ms; the chevron turns and the plus becomes a minus
- Filters
- Counts roll; turning off the last filter is refused with the signal cue
- Entries
- Rise 4px in a short stagger when a month opens
- Copy
- The label flips to COPIED for 1.4s
Responsive
- Under 560px (container width) the date and version sit above each entry and the subscribe field fills the row.
Performance
- Plain markup and CSS transitions; screenshots load lazily.
Changelog
v1.0.0 · 2026-10-04
First release
