Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Release Page Changelog Block for React Aria

A release page as a split: the tag, date, commit with a Copy button and contributors at the start, and the changes, new contributors and a collapsible assets table at the end.

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 page for React with React Aria, written for Hillhost, a fictional code host, and drawn as a split with a divider from the top rule to the foot. At the start sit the heading and the release's facts: the tag with a "Latest" badge, the day it was published, the commit hash with a Copy button that copies the full 40-character hash, and an avatar stack that reads "11 contributors". At the end the page lists what changed, the new contributors and the assets, a Collapsible open on load that holds a table of five files with their size, a SHA-256 checksum with a Copy button and a Download button. It's built from Collapsible, Copy Button, Avatar, Badge, Button and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For a product's own release pages, download pages and changelogs with checksums. The release, files and digests are example data, and the download links go nowhere.

FAQ

How do I change the release?

Edit TAG, PUBLISHED, COMMIT, CONTRIBUTORS, CHANGES, NEWCOMERS and ASSETS at the top of the file. The "N contributors" text and the "+7" count come from the length of CONTRIBUTORS, and each asset has a name, a size and its whole digest.

What do the Copy buttons copy?

The commit button copies the full 40-character hash, and each checksum button copies the whole SHA-256 digest, although the table shows only its first ten characters. Every button names what it copies ("Copy the SHA-256 checksum of hillhost-1.8.0-source.zip") and announces "Copied" politely.

How does the Assets section work?

It's a Collapsible, open on load, and its trigger is the section's h3. Closing it hides the table from assistive technology and the tab order. The block's height changes when it opens or closes, as a disclosure does.

Do the Download buttons download anything?

No. They are links to #, because the files are example data. Point each at your real release asset; the button's accessible name already includes the file name.

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

On a phone the facts come first, a rule separates them from the page, and the assets table scrolls sideways inside a focusable region. In a right-to-left layout the split mirrors, while file names, hashes and checksums stay left to right.

All 200 changelog blocks