shadcn.io is not affiliated with official shadcn/ui
Bookmark Saves Changelog Block for Radix UI
A release list you can save from: six releases as hairline rows in a framed list, each with a bookmark toggle, under a header with All and Saved tabs whose counts follow your saves and an empty state when nothing is saved.
Installation
Overview
A saveable changelog for React with Radix UI, written for Cornerfold, a fictional read-later app. A start-aligned header carries the title and one sentence, with a pill-shaped pair of tabs at its end, "All 6" and "Saved 2", whose counts are derived from your saves. Under it, six releases fill a framed list with + marks on its corners, as hairline rows: the version, the day it shipped and its type tags (an icon and a word: New, Improved, Fixed, Deprecated) at the start, a linked title and a sentence in the middle, and a bookmark toggle at the end. A pressed bookmark is the text colour with a filled icon, never the primary. The Saved tab lists only what you have saved, newest first, and when nothing is saved it shows an empty state that says how to save one. A polite line announces each save and removal. Saves live on the page only: they reset when you reload, and the header says so. On a phone the bookmark stays at the end of the row's first line. 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 Tabs, Toggle, Badge, Empty and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For changelogs and release hubs where readers want to come back to a few releases. The releases are example data.
FAQ
How do I change the releases and what starts saved?
Edit RELEASES at the top of the file, newest first: each has a version, a date as an ISO day, an href, its kinds, a title and a summary. SAVED_AT_START lists the versions saved when the page loads; empty it to start with none, and the Saved tab opens on its empty state. The counts on the tabs come from the same lists, so they can't disagree with the rows.
Where are the saves kept?
In the page's own state, so in this demo they reset on reload and are not shared across tabs or devices. To make them real, send the version from toggle to your own API (for signed-in readers) or write the list to localStorage after the first render, and keep the header's honest line only while that is true.
How does it work with a keyboard and a screen reader?
Each bookmark is a toggle button named "Save v8.3.0: Highlights sync across your devices" that says whether it is pressed, and each title is a link inside its own h3. Tab moves through the tabs, then the links and bookmarks in order; Space or Enter presses a bookmark, and a polite line says, for example, "Saved v8.3.0. 3 saved." The two tabs are a real tab list: the arrow keys move between them. The unseen copy of the full list that holds the frame's height is hidden from assistive technology and the keyboard.
What does the Saved tab show when nothing is saved?
An empty state with a bookmark icon, "Nothing saved yet" and one sentence that says to press the bookmark on a release. It has no button: the way to fill it is the bookmark in the All tab. The frame keeps its height, so the page doesn't jump when you switch tabs.
What moves, and what happens with reduced motion?
The header and the frame fade up once on load, with CSS transitions. With reduced motion they are off and the block simply appears. Pressing a bookmark and switching tabs change the page at once, with no animation.
How does it fit on a phone?
Below the lg breakpoint the tabs sit under the title, and each row stacks: the version, date and tags and the bookmark share the first line, with the title and sentence below. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the rows mirror while the version numbers stay left to right.