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