shadcn.io is not affiliated with official shadcn/ui
Filterable Changelog Block for Vue
The plainest filtered release list: one row of choices with counts (All, New, Improved, Fixed, Security) over nine releases, a live count of what is showing, and a height that never changes.
Installation
Overview
A filtered release list for Vue with Ark UI, written for Sievework, a fictional project tracker. A start-aligned header, then one row of choices in a Toggle Group: All, New, Improved, Fixed and Security, each with its count, counted from the releases themselves (9, 3, 2, 3 and 1). One choice is always on; picking a kind shows only its releases, newest first, as rows rail to rail, each an article with its version, day, title, a type tag and a sentence. A foot line in a polite live region says "Showing 3 of 9 releases" beside a "View all releases" link. The list keeps the height of the full nine rows (an unseen copy sits in the same grid cell), so filtering never moves the page or the foot line. On a phone the choices scroll sideways inside their own row. It's built from Guides, Toggle Group, Badge and Button, with a short fade on each change and your theme's tokens for every colour. The releases are example data.
FAQ
How do I change the releases or add a kind?
Edit RELEASES at the top of the file, newest first: each has a version, a date as an ISO day, a title, a summary and a kind. A kind is a constant with an icon, an id and a label; add one to the constants and to KINDS, and its choice, its count and its rows follow. The "All" count and the foot line come from the list's length.
Why doesn't the block get shorter when I filter?
So nothing below it jumps. The shown rows and an unseen, inert copy of all nine share one grid cell, and the cell is as tall as the copy. The foot line sits under that height, so the status and the link stay put. Shorter lists leave quiet space above the foot line, on purpose.
What does a screen reader hear?
The choices are a labelled group of buttons, each named by its kind and its count, with the current one pressed. Choosing one changes a polite status ("Showing 3 of 9 releases"). The unseen copy is hidden from assistive technology and can't take focus.
Is it the same on every React base and port?
Yes in look and behaviour. The group is a single-choice Toggle Group wired the way each library does it, with an empty selection ignored so one choice always stays on.
It takes a value array (value={[kind]}).
How does it fit on a phone and in a right-to-left layout?
Below sm each row stacks the version and day above the title and sentence, and the choices scroll sideways in their own row; nothing else scrolls at 320 pixels. In a right-to-left layout the row of choices starts at the start edge and versions keep their reading order.