shadcn.io is not affiliated with official shadcn/ui
Version Tabs Changelog Block for Vue
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 Vue with Ark 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.
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.