All components
Tag Cloud
Data DisplayA cloud of weighted tags that drift in and pop on hover.
FlutterDartNext.jsRustSEO
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/tag-cloud.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge2. Copy the component source into
components/library/tag-cloud.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tags | { label: string; weight?: number }[] | - | Tags with an optional 0-3 weight. |
Accessibility
- Weight maps to a bounded size scale, so text never becomes unreadable.
- Weight is clamped, so an out-of-range value cannot break layout.
- Hover feedback is scale and colour together.
Dependencies
motionclsxtailwind-merge