Skip to content
shadcn.io

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

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.

How does it fit on a phone and in a right-to-left layout?

The tags wrap across as many lines as they need, centred, and each row stacks the version above the title. In a right-to-left layout the rows and the status line mirror; the cloud is centred either way.

  • Pro

    Filterable Changelog

    Filters and browsing

    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.

  • Pro

    Search Changelog

    Filters and browsing

    A 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 browsing

    A 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 browsing

    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.

  • Pro

    Compact Badges Changelog

    Lists and timelines

    The 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 timelines

    A 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.