shadcn.io is not affiliated with official shadcn/ui
Card Grid Changelog Block for React
Six releases of a dashboard builder as a bento of cells on shared hairlines: the newest spans two columns and two rows with a short list, the rest are single cells with a feature icon, a type tag, version, date, title and a Read more link.
Installation
Overview
A card-grid changelog for React with Base UI, written for Tilepost, a fictional dashboard builder. A centred header carries the title and one sentence; under a rule with + marks, six releases fill a bento of cells on shared hairlines. The newest takes two columns and two rows on desktop, with a larger title and a short list of what is in it; the other five are single cells, three across on desktop and two on a tablet (the last widens to fill its row, so no slot is empty), and one per row on a phone. Each cell has a plate with the feature's icon, a type tag with an icon and a word (New, Improved, Fixed, Deprecated, Security), the version and the day it shipped, a title, two lines of text and a Read more link. There are no cover pictures: the structure and the plates are the picture. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For product pages and changelog landings where six releases should read as a set, not a feed. 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 ("2026-10-07"), an href, an icon for its plate, a kind (NEW, IMPROVED, FIXED, DEPRECATED or SECURITY), a title, a summary and, for the first one only, a short list of changes. The date on screen is spelled out from the ISO day by a small helper, so it reads the same on the server and in every browser. The grid is built for six; with another number, adjust spanOf so the last row has no empty slot.
How do the cells line up, and why is there no empty slot?
The grid draws its hairlines from a one-pixel gap over a border-coloured background, so every cell must fill its slot. spanOf gives the first cell two columns (and, from lg, two rows) and the last cell two columns on a tablet, which makes six cells fill a 3 by 3 grid on desktop and four rows of two on a tablet.
How are the types told apart without colour?
Each type tag is an outline badge with an icon and the word, so it reads in greyscale, in any theme and to a screen reader, which hears the word and skips the icon. The plate beside it holds the feature's own icon and is decoration, hidden from assistive technology.
Where do the Read more links go?
Each is a link to the release's own page (href). Its visible text is "Read more", and a screen reader hears "Read more about" and the title, so a list of links by name stays unambiguous.
What moves, and what happens with reduced motion?
The header and the grid fade up once on load, with CSS transitions. With reduced motion they are off and the block simply appears. The block has no state.
How does it fit on a phone?
Below the sm breakpoint the grid is one column, each cell stacked in release order, and the newest keeps its larger title and list. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the cells mirror, the arrow on each link turns, and the version numbers stay left to right.
Related
- Pro
Compact Badges Changelog
Lists and timelinesThe 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.
- Pro
Category Sections Changelog
Filters and browsingA changelog for a file organiser grouped under Added, Improved and Fixed headings, with a sticky index of the three sections beside them and every change tagged with the release it shipped in.
- Pro
Feature Spotlight Changelog
Spotlights and mediaOne release with its headline feature in the spotlight: a drawn greyscale editor with two named cursors beside the title and why it matters, and a band of four smaller changes underneath.
- 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
Bento Grid Features
BentosA bento of five features for an issue tracker, each cell drawn as the product at work: a live board with teammates' cursors, a pull request, a burndown, a triage rule and a typed SDK, in cells that share their hairlines.
- Pro
Cards Grid Blog
Card gridsThe six latest posts of an engineering blog as cards on shared hairlines: drawn greyscale covers, a category, the title as the card's one link, a one-line dek and a byline with the date and reading time.