shadcn.io is not affiliated with official shadcn/ui
Split View Changelog Block for Radix UI
A docs reader's release notes as master and detail in one frame: a listbox of six releases at the start, the chosen release's article at the end and Previous and Next buttons, on a height that never changes.
Installation
Overview
A master-detail release view for React with Radix UI, written for Twinpane, a fictional docs reader. A start-aligned header sits over a framed pair with an inner divider. At the start a listbox of six releases by date, each with its version, day and title; at the end the chosen release's article (version, day, type tag, title, a sentence and a short list of changes) with Previous and Next ghost buttons under it. The arrow keys move the choice and the article follows at once. Every article is drawn once, stacked in one grid cell, so the pane keeps the height of the longest and choosing never moves the page; a polite line names the release. On a phone the list sits above the article. It's built from Listbox, Badge, Button and Guides, with your theme's tokens for every colour. The releases are example data.
FAQ
How do I change the releases?
Edit RELEASES at the top of the file, newest first: each has a version, a date as an ISO day, a kind, a title, a summary and a list of changes. The list, the article, the Previous and Next ends and the status line are all built from it. Keep it to about six: past that, the list outgrows the article.
How does it work with a keyboard and a screen reader?
Tab moves into the list, which is a listbox with one tab stop. Up and Down move the choice and the article follows; Home and End jump to the first and last release. Previous and Next are buttons that step through the list in the same order and dim at the ends, staying focusable. Focus never moves on its own: a polite status line announces "Release v3.5.0, 3 of 6" with the title. Hover alone doesn't select, only a click or the keys do.
Does the pane change height when the release changes?
No. Every article is stacked in one grid cell and only the chosen one is visible, so the pane is as tall as the longest article. The hidden articles are in the markup but out of the accessibility tree and the tab order.
Why is there an Ark UI import on every base?
The catalog's Listbox is built on Ark UI on all four React bases, so the block imports createListCollection from @ark-ui/react/collection to describe the items, on Base UI, Radix and React Aria too. The Vue, Svelte and Solid versions use the matching Ark package.
How are Previous and Next built?
They are buttons, not links, because nothing navigates.
They take an onClick handler.
How does it fit on a phone and in a right-to-left layout?
Below lg the list sits above the article, inside the same frame, with a rule between them, and Previous and Next stay at the article's foot. In a right-to-left layout the panes swap sides, the arrows flip and versions and dates keep their reading order.