Icon Cloud
An interactive 3D tag cloud component
import { IconCloud } from "@/components/vritti/icon-cloud"
const slugs = [
"typescript",
"javascript",
"react",
"html5",
"css3",
"nodedotjs",
"nextdotjs",
"prisma",
"postgresql",
"firebase",
"vercel",
"docker",
"git",
"github",
"figma",
]
export function IconCloudExample() {
const images = slugs.map(
(slug) => `https://cdn.simpleicons.org/${slug}/${slug}`,
)
return (
<div className="relative flex h-[400px] w-full max-w-lg items-center justify-center overflow-hidden bg-zinc-50 dark:bg-zinc-900 rounded-lg">
<IconCloud images={images} />
</div>
)
}
Installation
pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/icon-cloud"