Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Expandable Release Entries Block for React Aria

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.

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

Expandable release entries for React with React Aria, written for Foldnote, a fictional data-import SDK. A start-aligned header sits over four rows rail to rail, each its own Collapsible: a chevron, the version, the title and the date. Opened, a row shows a sentence and a migration snippet in a labelled, focusable code region with a Copy button above it, so a long line scrolls inside its box. The newest is open on load and any number can be open at once. View all releases ends the block. It's built from Guides, Collapsible, Copy Button and Button, with your theme's tokens for every colour. For SDKs, libraries and any changelog whose entries come with code. The releases are example data.

FAQ

How do I change which entries start open?

The block holds the open rows in one list, opened, which starts with the newest version. Change that list to open others, or leave it empty to start closed.

How do I change a snippet?

Each release has a file name and lines, one string per line; the same lines are shown and copied. The snippet sits in a section named "v3.0.0 migration snippet" that takes focus, so the keyboard can scroll a long line. The Copy button announces "Copied" politely.

Can the keyboard reach a closed row's snippet?

No. A closed row's content is inert, so its code region and Copy button are out of the tab order on every base. React Aria's Collapsible keeps closed content in the HTML; the block marks it inert.

How does it fit on a phone and in a right-to-left layout?

Below sm each trigger shows the version and date on one line with the title under them, and a long snippet line scrolls inside its box. In a right-to-left layout the chevron stays a down-and-up chevron, and code stays left to right.

What moves?

The header and the list fade up once on load; a row opens with a height transition that reduced motion turns off.

All 200 changelog blocks