shadcn.io is not affiliated with official shadcn/ui
Release Notes Changelog Block for React
One release written as a long article behind a split divider, with a sticky contents list that marks the section on screen and turns into a row of chips on a phone.
Installation
Overview
A release-notes changelog for React with Base UI, written for Notecraft, a fictional documentation tool. Instead of a card in a list, one release (Notecraft 4.8) is a long article: a version, a day, type tags, a title and a dek, then four sections, New, Improved, Fixed and Upgrade notes, separated by hairline bands and ending with a command in a focusable code region. The article comes first in the page and fills the end column behind a split divider. In the start column, under the title, a Toc list stays in view as you read and marks the section on screen; each entry is an anchor to its heading. On a phone the contents list becomes a row of chips above the article. It's built from Toc, Badge, Button and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For long-form release notes, upgrade guides and major-version announcements. The product, version and text are example data.
FAQ
How does the contents list know which section I'm in?
The Toc watches the four section headings as you scroll and marks the entry for the one on screen with a bar that slides to it. Every entry is also a plain anchor link, so it works without the highlight and for keyboard users: Tab to an entry and press Enter to jump to its heading.
How do I change the sections?
Edit the Section constants and the SECTIONS list at the top of the file for the anchors and titles, and the Band blocks in the article for the text. The contents list, the chips on a phone and the headings' ids are all built from SECTIONS, so they cannot drift apart.
Why does the article come before the contents list in the page?
So the release itself is what a screen reader reaches first after the title, and the contents list is a shortcut after it. On a wide screen the contents list is drawn in the start column beside the article; on a phone it is drawn above the article as chips.
Can I copy the migration command?
The command sits in a focusable region that scrolls on a narrow phone, and it is plain text you can select. It has no Copy button here, since the block's one control is the contents list.
Related
- Pro
Release Timeline Changelog
Lists and timelinesA release timeline for an API client: a compact header with a Subscribe link, then the latest four releases on a hairline rail with dots, each with its version, date, type tags, a linked title and its notes, and View all releases at the foot.
- Pro
Expandable Release Entries
Lists and timelinesFour release rows that each open to a sentence and a copyable migration snippet in a focusable code region; the newest is open on load and any number can be open.
- Pro
Category Sections Changelog
Filters and browsingA changelog for a file organiser grouped under Added, Improved and Fixed headings, with a sticky index of the three sections beside them and every change tagged with the release it shipped in.
- Pro
Chaptered Origin Story About
Company storyA company's origin story as four long chapters of prose beside a sticky chapter index that follows the reader, turning into a row of chips on phones.
- Pro
Monthly Digest Changelog
Filters and browsingMonth pills with entry counts above a framed panel that groups the month's entries by type, with a Copy button that puts the whole digest on the clipboard as plain text.
- Pro
Year in Review Changelog
Metrics and chartsA year of releases behind a split divider: the total in large digits with a Changes or Releases switch, and four quarter rows with their headline release and a bar scaled to the busiest.