shadcn.io is not affiliated with official shadcn/ui
Changelog Summary About Block for React Aria
A release summary for a release-notes tool: a segmented bar of what changed since launch (added, improved, fixed) with counts, a filter by type and the latest four releases as rows.
Installation
Overview
A changelog summary for React with React Aria, written for Changeleaf, a fictional release-notes tool. A start-aligned header carries a four-button filter at its end (All, Added, Improved, Fixed). Under it a band draws one segmented bar of everything shipped since launch, split into the three kinds of change in proportion, with a legend that gives each kind's count and share. Below, the latest four releases are rows ruled from rail to rail: the version and how long ago it shipped at the start, a title and the release's changes tagged by type at the end. The filter keeps only the changes of one type and the releases that have any, and lights that type's segment in the bar while the others dim. The block keeps its height whatever you pick. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Guides, Toggle Group and Badge, with CSS transitions for the entrance and your theme's tokens for every colour. For about pages, product pages and release hubs that want to show how a product is looked after, not just that it changes. The counts and release notes are example data.
FAQ
How do I change the releases and the counts?
The releases are RELEASES at the top of the file: a version, a title, how long ago it shipped (a phrase, never a date) and its changes, each a kind of added, improved or fixed and a sentence. The bar and legend come from PARTS, the counts of all changes since launch; the total, the shares and the segment widths are computed from them, so they always agree. RELEASE_COUNT is the figure in the header's sentence.
What does the filter do, and can it be switched off?
It is a toggle group that always has one button pressed: pressing the pressed one keeps it, pressing another moves it, and All shows everything. A type keeps only its changes and drops the releases with none; the bar lights the matching segment and dims the other two, and a polite status line says how many changes in how many of the four releases are showing.
Why doesn't the page jump when I filter?
An unseen copy of the full list sits in the same grid cell as the filtered one, hidden from assistive technology and the keyboard, so the block is always as tall as the full list. A filtered list simply leaves empty space under its last row. Nothing is mounted or unmounted below it.
How are the three types told apart without colour?
Every change carries a text badge (Added, Improved or Fixed), and the legend names each segment. The bar's three tones are foreground at full, half and a fifth strength, so it reads in any theme and in greyscale. The bar itself is hidden from assistive technology: the legend beside it gives the same numbers as words.
How does it fit on a phone?
The filter row scrolls sideways if it doesn't fit; the four buttons are ordinary controls, so keyboard focus scrolls them into view. The legend wraps, and each release stacks its version and age above its title and changes. Nothing scrolls the page sideways at 320 pixels, and the version numbers are isolated so they keep their order in a right-to-left layout.