Skip to content
shadcn.io

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.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

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.

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.

  • Pro

    Release Timeline Changelog

    Lists and timelines

    A 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 timelines

    Four 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 browsing

    A 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

    A 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 browsing

    Month 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 charts

    A 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.