Tag Cloud

View full screen

Flowing cluster of pill-shaped tags with three emphasis tiers. Conveys breadth at a glance — hierarchy through color weight, not font size.

Mixed emphasis

Three tiers of visual weight — high, default, and low. The primary use case: a curated cluster where the most important capabilities catch the eye first.

  • Claude Code
  • Static HTML+CSS
  • Design Tokens
  • AI Alt Text
  • Container Queries
  • OKLCH
  • Tailwind v4
  • Astro
  • SQLite
  • Drizzle ORM
  • Playwright
  • Inbox Workflow
  • Schema Migrations
  • EAA Accessible
  • Semantic HTML
  • Responsive Type

Single tier

All items at default emphasis. Works as a uniform cloud when hierarchy isn't needed — a simple technology list, for example.

  • Astro
  • Tailwind v4
  • SQLite
  • Drizzle ORM
  • Container Queries
  • OKLCH

Minimal

Just a few items. Shows the component doesn't need a crowd — three tags still read as a cluster.

  • Claude Code
  • Astro
  • Tailwind v4

Anatomy

TagCloud composes Section internally. The inner container is a centered flex-wrap. Each TagCloudItem is a pill-shaped span with emphasis-driven styling.

  • High emphasis
  • Default emphasis
  • Low emphasis
Shell Section → ul flex flex-wrap justify-center gap-2 list-none
Item (high) bg-foreground text-background font-semibold px-4 py-1.5 rounded-full
Item (default) bg-muted text-foreground px-4 py-1.5 rounded-full
Item (low) text-muted-foreground border border-border px-4 py-1.5 rounded-full