shadcn.io is not affiliated with official shadcn/ui
Version Tabs Changelog Block for React
An 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.
Installation
Overview
A tabbed release view for React with Base UI, written for Tabbook, a fictional app platform. A centred header sits over a framed window whose top edge is a row of compact chip tabs in monospace (v4.2, v4.1, v4.0 and v3.9), the open one filled with the foreground colour. The panel under it names the version, its day and the number of changes, then lists the changes in two columns of hairline cells, each with a type tag (an icon and a word) and one sentence. The arrow keys move between the tabs. Every panel is drawn once, unseen, in the same grid cell, so the window keeps the height of the tallest and choosing a version never moves the page. On a phone the chips scroll sideways in their row and the changes stack in one column. It's built from Tabs, Badge and Guides, with your theme's tokens for every colour. The versions are example data.
FAQ
How do I change the versions and their changes?
Edit VERSIONS at the top of the file, newest first: each has a name, a date as an ISO day and a list of changes, each with a kind and a text. The chips, the panel header's count and the cells are built from it. Use an even number of changes per version, or two columns will leave one cell empty.
How does it work with a keyboard and a screen reader?
The chips are a tab list with one tab stop: arrow keys move between versions, Home and End jump to the first and last, and the panel opens at once. Each chip is named by its version, the list is named "Version", and the panel is labelled by its chip. The type tags are words as well as icons, so a screen reader reads "New" before each change.
Does the window change height when the version changes?
No. All four panels are drawn in one grid cell, the three unseen ones hidden from assistive technology and the keyboard, so the window is as tall as the tallest and nothing below it moves.
Is it the same on every React base and port?
Yes in look and behaviour. The tabs are wired the way each library does it, and the selected chip is styled from each library's own selected state.
Tabs take a value and an onValueChange that receives the new value.
How does it fit on a phone and in a right-to-left layout?
The chips stay in one row that scrolls sideways inside the window, and the changes stack in one column. In a right-to-left layout the chips and the cells mirror, the arrow keys follow the reading direction, and versions keep their left-to-right form.
Related
- Pro
SDK Versions Changelog
APIs and integrationsClient libraries in one tabbed window: a tab per language with its latest version, then that version large, its day, a support state as a shape and a word, the install command in a code region with a Copy button, and a table of the last three versions.
- Pro
Split View Changelog
Filters and browsingA 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.
- 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
Package Changelog
Packages and versionsOne package's changelog behind a version select: its semver bump, release day, weekly downloads that count on to each version's figure, a Migration guide link, the install command with a Copy button and the changes in an accordion of groups.
- Pro
Platform Specific Changelog
Filters and browsingA band of four tabs (Web, iOS, Android, API) with an entry count each, over the chosen platform's releases as rows that end the block, the first row applying to every platform.
- Pro
Monthly Digest Changelog
Filters and browsingMonth pills with entry counts above a framed panel that groups the month's entries by type, with a Copy button that puts the whole digest on the clipboard as plain text.