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