shadcn.io is not affiliated with official shadcn/ui
Changelog Nav Sidebar Block for React
Release notes in a fixed-height window: a release tree by major version in a slim rail with the newest tagged Latest, the chosen release's notes in the page, and Jump to latest in the top bar.
Installation
Overview
Give release notes their own app shell with this changelog nav sidebar for React with Base UI. A window framed by a hairline with a plus mark on each corner holds the Sidebar at a slim width: the product's mark and a release tree by major version, where v3.0 is open with three releases and v2.5, v2.0 and v1.x are folded, each release with its version and the newest tagged with a Badge saying Latest. Beside it, a top bar names the open release and holds Jump to latest, a Shine Button and the only colored control. Choose a release and the page loads its notes: a summary, the date and a list of changes that each open with a word (Added, Changed, Fixed or Removed); Newer and Older at the foot of the notes walk the list and open the major they land in. Folded, the rail keeps one icon per major and unfolds onto the one you press, and below the medium breakpoint it becomes a sheet. It's built from Sidebar, Collapsible, Badge, Button, Shine Button, Avatar and Guides, with a CSS entrance only. For release notes, version histories, API changelogs and any app where the navigation is a tree of dated items.
FAQ
How is the release tree built?
From RELEASES, the typed list at the top of the file, newest first, and MAJORS, the four folds. Each release names its major, so a fold lists the releases that name it, and the first release in the list is the one tagged Latest. Add a release at the top of the list and it becomes Latest, and the tag moves with it. In your app, build the list from your releases and group it by major version the same way.
What stays in the page, and how do I connect it?
Everything. The notes are typed in the block, and choosing a release, folding a major and walking Newer and Older only change the block's own state; nothing is fetched, and reloading starts over. Replace the handlers with your routes or your API. The releases are links to # whose handler loads the notes instead of navigating. They're SidebarMenuButtons with render set to an a element.
What does Jump to latest do when you are already there?
It stays pressable and answers in the status line ("Already on 3.0.2, the latest release.") instead of doing nothing silently. Its button is marked as disabled for assistive technology while you are on the newest release, and it works again as soon as you open an older one. Older and Newer do the same at the ends of the list.
How does it work on a phone?
Below the medium breakpoint the sidebar becomes a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. Escape or choosing a release closes it and focus goes back to the menu button. The notes fill the page, and the status line at the foot of the window states the open release and its date. Jump to latest keeps its icon in the top bar.
What happens when the sidebar collapses?
The menu button or the rail along the sidebar's edge folds it to its icons: one for each major, with a tooltip. A release list has no place in a folded rail, so pressing a major unfolds the rail onto it. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.
Is it accessible?
The sidebar is a navigation landmark named after the product. Each major is a button that says whether it is expanded, each release is a link marked as the current page when it is open, and a release's name includes its date. The notes are a labelled scrollable region reachable with Tab, one polite status line reports each change, and dates and versions are isolated so they read right in a right-to-left layout.