magic-ui
components
ui

icon-cloud

An interactive 3D tag cloud component.

3d
animated
effect
form
interactive
special
text
View Docs

Source Code

Files
icon-cloud
1import { IconCloud } from "@/components/magicui/icon-cloud";
2 
3const slugs = [
4  "typescript",
5  "javascript",
6  "dart",
7  "java",
8  "react",
9  "flutter",
10  "android",
11  "html5",
12  "css3",
13  "nodedotjs",
14  "express",
15  "nextdotjs",
16  "prisma",
17  "amazonaws",
18  "postgresql",
19  "firebase",
20  "nginx",
21  "vercel",
22  "testinglibrary",
23  "jest",
24  "cypress",
25  "docker",
26  "git",
27  "jira",
28  "github",
29  "gitlab",
30  "visualstudiocode",
31  "androidstudio",
32  "sonarqube",
33  "figma",
34];
35 
36export function IconCloudDemo() {
37  const images = slugs.map(
38    (slug) => `https://cdn.simpleicons.org/${slug}/${slug}`,
39  );
40 
41  return (
42    <div className="relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border bg-background">
43      <IconCloud images={images} />
44    </div>
45  );
46}