shadcn.io is not affiliated with official shadcn/ui
Compact Badges Changelog Block for Vue
The eight latest releases of a ticketing tool as one dense framed table: a mono version badge, a type tag with an icon and a word, what changed and the day it shipped.
Installation
Overview
A dense release table for Vue with Ark UI, written for Chipnote, a fictional ticketing tool. A centred header sits over a framed table of eight releases with a pinned header row: the version in a mono outline badge, what changed, the kind of change as a tag with an icon and a word (New, Improved, Fixed, Security, Deprecated) and the day it shipped. The frame's corners carry the + marks and "View all releases" ends the block. The table has a caption for assistive technology, real column and row headers, and sits in a labelled, focusable region so the keyboard can scroll it if it ever outgrows its frame. On a phone the kind and the day move under the change, so the version and the change stay side by side without scrolling sideways. The page's rails and top rule come from the Guides spine. It's built from Guides, Badge and Button, with CSS transitions for the entrance and your theme's tokens for every colour. For internal release trackers and docs pages where the reader scans many versions at once. The releases are example data.
FAQ
How do I change the releases?
Edit RELEASES at the top of the file, newest first. Each row has a version, a change, a kind and a date as an ISO day ("2026-03-30"). The five kinds are constants at the top (NEW, IMPROVED, FIXED, DEPRECATED, SECURITY), each an icon, an id and a label. Dates are fixed, never computed from today, and spelled out by a small helper so they read the same on the server and in every browser.
Is it a real table?
Yes: a native table with a caption, column headers with scope="col" and the version as each row's header, so a screen reader announces the version with every cell. It is a native table on every base, not the catalog Table, because a caption and row headers need real table markup.
What does the pinned header do?
The table sits in a region capped at 28rem tall from sm; eight rows fit inside it, so nothing scrolls today. Add more rows and the region scrolls vertically with the header row pinned to its top. Below sm the cap is off and the page scrolls instead.
Where does View all releases go?
It's a link (href="#"): point it at your full changelog. It's a ghost button, so the block has no primary action.
The button takes asChild with the link inside, so it can be your router's link.
How does it fit on a phone and in a right-to-left layout?
Below sm the Kind and Released columns are dropped and their content (the tag and the day) is repeated under the change, so two columns remain and nothing scrolls sideways at 320 pixels. In a right-to-left layout the columns run in reverse, the arrow on View all releases turns, and the mono versions keep their reading order.