Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Release Notes Changelog Block for Radix UI

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A release-notes changelog for React with Radix 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.

What happens on a phone?

The sticky list gives way to a row of chips that scrolls sideways above the article, each an anchor to its section, and the article reads in one column under it.

What moves, and what happens with reduced motion?

The header and the article fade up once on load and the contents bar slides between entries. With reduced motion the entrance is off and the bar jumps. Jumping to a section follows your browser's own scroll setting.

All 200 changelog blocks