build69 / Components / Data Display / TagCloud

TagCloud

v1.0.4Updated 27 Aug 2026

Visible cluster of selectable tag chips (filter rail, blog cloud, category picker). Three selection modes (none / single / multi), three layouts (wrap / horizontal-scroll / grid), six variants (default / outline / subtle

View source ← Back to catalog

Preview

Live · 15 stories

DefaultOpen ↗

▸Why this is recommendedformtagschipsfilter+4

The default, out-of-the-box TagCloud.

Recommended for+14

✓Filter rails
✓Blog tag clouds
✓Category pickers
✓Faceted search summary

Tags+6

formtagschipsfiltercloudfacetscategory-pickerdefault

Features+4

Selection modes: none (display) / single / multi
Layouts: wrap / horizontal-scroll / grid
Variants: default / outline / subtle / pill / ghost / soft (vivid border + tinted bg in the same tone)
Sizes: sm / default / lg
weightByCount blog-cloud sizing
Per-tag count badge
Searchable filter input
Clear-all when something selected
Sort: label / count asc + desc
Per-tag tone / icon / disabled
i18n: labels prop overrides every built-in string (search, clear controls, empty states)

Not recommended for−2

✕Chip-style multi-input (use TagInput)
✕Single dropdown (use Combobox)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "TagCloud" })

Usage

import { TagCloud } from '@/components/data-display/tag-cloud';

<TagCloud
  tags={topics}
  selectedIds={picked}
  onSelectionChange={setPicked}
  selectionMode="multi"
  weightByCount
  searchable
/>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired

tags

Tag list with optional count

TagCloud

Preview

Install

Usage

Props

Related