shadcn.io is not affiliated with official shadcn/ui
Category Sections Changelog Block for Vue
A 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.
Installation
Overview
A changelog grouped by kind for Vue with Ark UI, written for Sortshelf, a fictional file organiser. Behind a split divider the end column holds three sections, Added, Improved and Fixed, each a heading with an icon plate and a count over a ruled list of three changes; every change has a title, a sentence, and the version and day of the release it shipped in. In the start column the title and an index of the three sections stay in view while you read: a bar follows the section on screen, and each entry jumps to its heading and carries its count. On a phone the index becomes a row of chips under the title. The page's rails and top rule come from the Guides spine, so the block lines up with its neighbours in a stack. It's built from Guides, Toc and Button, with CSS transitions for the entrance and your theme's tokens for every colour. For product changelogs and release hubs where readers scan by kind of change rather than by date. The changes are example data.
FAQ
How do I add a change or a section?
Edit GROUPS at the top of the file. Each group has an anchor (the heading's id, which must be unique on the page), an icon, a label and its changes; each change has a title, a summary, a version and a date as an ISO day ("2026-03-24"). The index, its counts and the "9 changes" in the header are all computed from the same list, so a new group or change shows up everywhere at once. Dates are fixed and spelled out by a small helper, so they read the same on the server and in every browser.
How does the index work?
From lg it's the catalog Toc: it stays in view beside the sections, marks the section currently on screen with a bar, and each entry is a link to its heading. Below lg the same three links become a row of chips under the title, plain anchors without the moving bar. The sections are short, so on a tall screen they may all be in view at once; the bar then rests on the first.
Are the section icons emoji?
No. They are Lucide icons on a small plate (a sparkle for Added, a rising line for Improved, a wrench for Fixed), drawn in your theme's colours, so they match your type and read in any theme. The section's name is text in its heading.
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 lg the columns stack: the title, the chip row, then the sections one under another, each ruled from rail to rail. Each change puts its version and day under the text. Nothing scrolls sideways at 320 pixels; the chip row scrolls if its chips ever outgrow the width. In a right-to-left layout the index, the split divider and the version column swap sides, the arrow on View all releases turns, and the counts and versions stay in reading order.