shadcn.io is not affiliated with official shadcn/ui
Sidebar Nav Changelog Block for Radix UI
A docs site's release notes with a side navigation of four categories and their counts: current one marked, eight releases at the end, one divider with a plus mark, and chips that scroll on a phone.
Installation
Overview
A release list with a side navigation for React with Radix UI, written for Marginwick, a fictional docs site builder. A start-aligned header sits over a two-panel band under the top rule. At the start a nav of four categories (All, Features, Improvements and Fixes), each a ghost button with its count in an outline badge and aria-current on the one you are in; at the end a quiet line naming the category and the matching releases as rows, each an article with its version and day, a title, a type tag and a sentence. A divider with a + mark where it meets the rule sets the panels apart. The rows keep the height of all eight (an unseen copy shares their grid cell), so changing category never moves the page. Below lg the navigation becomes a row of chips that scrolls sideways in its own band over the rows. It's built from Button, Badge and Guides, with your theme's tokens for every colour. The releases are example data.
FAQ
How do I change the categories and the releases?
Edit CATEGORIES and RELEASES at the top of the file. A category names the kind of release it holds (All holds every kind), and each release has a kind; the counts in the navigation and the line above the rows are counted from the releases.
Is the navigation real links?
No: the choices narrow the list in place, so they are buttons inside a labelled nav, with aria-current="true" on the current one. For categories that live at their own addresses, swap the buttons for links and set aria-current="page".
Why doesn't the block get shorter when I change category?
So nothing below it jumps. The shown rows and an unseen, inert copy of all eight share one grid cell, and the cell is as tall as the copy. Shorter categories leave quiet space under the last row, on purpose.
Is it the same on every React base and port?
Yes in look and behaviour.
The category buttons take an onClick handler.
How does it fit on a phone and in a right-to-left layout?
Below lg the navigation is a single row of rounded chips that scrolls sideways inside its own band, with the current chip outlined in the foreground colour, and the rows sit under it; nothing else scrolls at 320 pixels. In a right-to-left layout the panels swap sides, the current marker moves to the other edge and versions and counts keep their reading order.