New

TagCloud

Weighted tag display with varying sizes based on frequency

Data Displaytagscloudkeywordsweighted

Dependencies

shadcn/ui components needed:

npx shadcn@latest add cardnpx shadcn@latest add badge

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client"
2
3import * as React from "react"
4import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
5import { Badge } from "@/components/ui/badge"
6import { cn } from "@/lib/utils"
7
8interface TagCloudProps {
9  className?: string
10}
11
12interface Tag {
13  name: string
14  weight: number
15  category: "tech" | "design" | "business" | "data"
16}
17
18const tags: Tag[] = [
19  { name: "React", weight: 5, category: "tech" },
20  { name: "TypeScript", weight: 5, category: "tech" },
21  { name: "Figma", weight: 4, category: "design" },
22  { name: "Analytics", weight: 3, category: "data" },
23  { name: "Revenue", weight: 2, category: "business" },
24  { name: "Node.js", weight: 4, category: "tech" },
25  { name: "Tailwind", weight: 5, category: "tech" },
26  { name: "Python", weight: 3, category: "tech" },
27  { name: "Design Systems", weight: 4, category: "design" },
28  { name: "API", weight: 3, category: "tech" },
29  { name: "Machine Learning", weight: 2, category: "data" },
30  { name: "DevOps", weight: 3, category: "tech" },
31  { name: "UX Research", weight: 2, category: "design" },
32  { name: "GraphQL", weight: 3, category: "tech" },
33  { name: "Testing", weight: 2, category: "tech" },
34]
35
36const categoryColors = {
37  tech: "border-blue-200 hover:bg-blue-500/10 hover:border-blue-300",
38  design: "border-violet-200 hover:bg-violet-500/10 hover:border-violet-300",
39  business: "border-emerald-200 hover:bg-emerald-500/10 hover:border-emerald-300",
40  data: "border-amber-200 hover:bg-amber-500/10 hover:border-amber-300",
41}
42
43const weightSizes = {
44  1: "text-xs opacity-50",
45  2: "text-sm opacity-60",
46  3: "text-base opacity-70",
47  4: "text-lg opacity-85",
48  5: "text-xl opacity-100",
49}
50
51export function TagCloud({ className }: TagCloudProps) {
52  return (
53    <Card className={cn("w-full", className)}>
54      <CardHeader>
55        <CardTitle>Popular Tags</CardTitle>
56      </CardHeader>
57      <CardContent>
58        <div className="flex flex-wrap gap-2">
59          {tags.map((tag) => (
60            <Badge
61              key={tag.name}
62              variant="outline"
63              className={cn(
64                "cursor-pointer transition-all duration-200 hover:scale-110",
65                weightSizes[tag.weight as keyof typeof weightSizes],
66                categoryColors[tag.category]
67              )}
68            >
69              {tag.name}
70            </Badge>
71          ))}
72        </div>
73      </CardContent>
74    </Card>
75  )
76}