shadcn.io is not affiliated with official shadcn/ui
Split View Changelog Block for React
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 Base 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.
Related
- Pro
Sidebar Nav Changelog
Filters and browsingA 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.
- Pro
Version Tabs Changelog
Filters and browsingAn app platform's last four versions as compact monospace chip tabs on a window's top edge, each panel listing its changes with type tags in two columns of cells, on a height that never changes.
- Pro
Accordion Changelog
Lists and timelinesA release list for release-notes software: five releases as accordion rows, each with its version, date, one-line summary and change count, the newest open on a list of typed changes, and a foot band that links to every release.
- Pro
Expandable Release Entries
Lists and timelinesFour release rows that each open to a sentence and a copyable migration snippet in a focusable code region; the newest is open on load and any number can be open.
- Pro
Release Timeline Changelog
Lists and timelinesA release timeline for an API client: a compact header with a Subscribe link, then the latest four releases on a hairline rail with dots, each with its version, date, type tags, a linked title and its notes, and View all releases at the foot.
- Pro
Split View FAQ
NavigationA master-detail FAQ for a sales CRM: a list of eight questions at the start and the chosen answer in a framed panel at the end, with a Next question button.