shadcn.io is not affiliated with official shadcn/ui
Tag Cloud Changelog Block for React
A framed cloud of nine topic toggles sized by how many releases carry them, with multiple choice, a live line naming what shows, a Clear button and eight release rows on a height that never changes.
Installation
Overview
A tag-cloud release list for React with Base UI, written for Tagwell, a fictional changelog tag manager. A centred header sits over a framed cloud of nine topic toggles in a multiple-choice Toggle Group (Admin, API, Auth, Billing, Exports, Mobile, Performance, Search, Security), each with its count, in three sizes by how many of the eight releases carry the tag. Picking tags shows every release that carries any of them; with none picked all eight show. A polite line under the cloud says what is showing ("Showing 4 of 8 releases tagged Auth or API"), and a ghost Clear button empties the choice. The rows keep the height of all eight (an unseen copy shares their grid cell), so choosing a tag never moves the page. On a phone the cloud wraps and the rows stack. It's built from Toggle Group, Badge, Button and Guides, with your theme's tokens for every colour. The releases and tags are example data.
FAQ
How do I change the tags and the releases?
Edit TAGS and RELEASES at the top of the file. A release lists its tags as constants, and every count, every size and the status line are worked out from those lists, so a tag you add to a release grows its count and, at three releases, its size. Sizes follow sizeOf: three or more releases is large, two is medium, one is small.
Does it match any tag or all of them?
Any: a release shows when it carries at least one of the picked tags, so adding a tag never makes the list shorter. The status line says "tagged Auth or API" to make that plain. For all-of matching, change releasesOf to use every instead of some.
Is it the same on every React base and port?
Yes in look and behaviour. The group is a multiple-choice Toggle Group wired the way each library does it. It takes a value array and returns the new one.
Why doesn't the block get shorter when I pick tags?
So nothing below it jumps. The shown rows and an unseen, inert copy of all eight share one grid cell, and the cell is as tall as the copy. Shorter lists leave quiet space under the last row, on purpose.
What does a screen reader hear?
The cloud is a labelled group of toggle buttons, each named by its tag and its count, with the picked ones pressed. Choosing changes a polite status line. Clear is always in the page, and dimmed and inert to the pointer while nothing is picked, so focus is never lost when it empties the choice.
Related
- Pro
Filterable Changelog
Filters and browsingThe 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.
- Pro
Search Changelog
Filters and browsingA docs search tool's eight releases behind a search band: type to filter, matched words marked, a slash key that focuses the field, a live count and an empty state with a clear button, on a height that never changes.
- Pro
Sidebar Nav Changelog
Filters and browsingA docs site's release notes with a side navigation of four categories and their counts: current one marked, eight releases at the end, one divider with a plus mark, and chips that scroll on a phone.
- 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
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
Color Coded Changelog
Lists and timelinesA changelog for a palette tool whose five kinds of change are coded without colour: a pattern strip, an icon and a word each, with a legend that dims the other rows in place.