shadcn.io is not affiliated with official shadcn/ui
Condensed Feed Changelog Block for React Aria
Twelve releases of a news reader as a single-line ledger: the day, a type word, the headline and the version on one row, month rows between, and the older rows opening in place.
Installation
Overview
A one-line-a-release ledger for React with React Aria, written for Haikufeed, a fictional news reader. A start-aligned header sits over a list ruled from rail to rail: each row is the day in mono, a type word with a small icon (New, Improved, Fixed, Security, Deprecated), the headline and the version at its end, and thin month rows (March, February, January 2026) break the list. The first five rows show; a ghost button, "7 more releases", opens the rest in place, and "View all releases" sits at the end of the same foot row. The older rows are in the page from the start; folded, they are hidden and out of reach of the keyboard. On a phone the type word moves under the headline. The page's rails and top rule come from the Guides spine, and the foot row is a band under the list. It's built from Guides and Button, with CSS transitions for the entrance and the opening and your theme's tokens for every colour. For products with frequent releases where the date, the kind and the headline are all a reader needs. The releases are example data.
FAQ
How do I change the releases and the months?
Edit ENTRIES at the top of the file, newest first. Each has a version, a date as an ISO day, a kind and a title; give the first entry of each month a month ("February 2026") and a thin month row is drawn before it. SHOWN is how many rows show before the button: the rest open in place, and the button's count is computed from them. Rows show the month and day only, so keep the month rows when you list more than one year.
How does the list open, and are the folded rows in the page?
The folded rows are a second list in the same ruled rhythm, always in the page. Folded, they are invisible and inert (hidden to assistive technology and skipped by Tab); opening unrolls them with a CSS grid-row transition and brings them into reach. The button keeps one label, "7 more releases", and its aria-expanded says whether they are open, so a screen reader hears the state rather than a changed name. It's a plain disclosure, so it behaves the same on every base.
How dense is it?
A row is a single line, 36 pixels tall at the default text size, with the headline in text-sm and the day, kind and version in text-xs. The type word has an icon beside it so the kind never relies on position alone.
Where does View all releases go?
It's a link (href="#"): point it at your full changelog. Both foot buttons are ghost buttons, so the block has no primary action.
The button renders a link when it has an href.
How does it fit on a phone and in a right-to-left layout?
Below sm each row is the day, the headline and the version on one line, with the type word under the headline, so a row grows from one line to two and nothing scrolls sideways at 320 pixels. In a right-to-left layout the columns run in reverse, the arrow on View all releases turns and the chevron on the opener still points down.