shadcn.io is not affiliated with official shadcn/ui
Compact Badges Changelog Block for React
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 React with Base 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 renders the link it's given with render, with nativeButton={false}.
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.
Related
- Pro
Condensed Feed Changelog
Lists and timelinesTwelve releases of a news reader as a single-line ledger: the day, a type word, the headline and the version on one row, month rows between, and the older rows opening in place.
- Pro
API Versioning Matrix Changelog
APIs and integrationsA framed table of API versions with a status badge (Current, Supported, Deprecated, End of life), release and support-end days and a check or minus per capability, with a toggle group that rings one capability's column and says which versions have it.
- Pro
Dependency Updates Changelog
Packages and versionsA table of eight dependency updates in two groups, Production and Dev: package, old and new version, the kind of bump and a three-pip risk, with sortable heads that reorder the rows inside each group.
- Pro
Commit Log Changelog
Code and commitsA git log of seven commits: a short hash with a Copy button for the full one, the commit type as a word, the message, an initials avatar and the day, with a Branch Select that swaps the list.
- 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
Compact Timeline Changelog
Lists and timelinesThe last three weeks of a time-tracking app on one thin rail: six releases of two small lines each, with the dot's shape (circle, diamond, square, ring) telling the kind and a one-line key.