{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "background-boxes",
  "type": "registry:block",
  "title": "Background boxes",
  "description": "Background boxes",
  "files": [
    {
      "path": "components/usages/backgroundboxesusage.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { Boxes } from \"@/registry/open-source/background-boxes\";\r\nimport { cn } from \"@/registry/utilities/cn\";\r\n\r\nexport default function Usage() {\r\n\treturn (\r\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\r\n\t\t\t<div className=\"h-96 relative w-full overflow-hidden bg-slate-900 flex flex-col items-center justify-center rounded-lg\">\r\n\t\t\t\t<div className=\"absolute inset-0 w-full h-full bg-slate-900 z-20 mask-[radial-gradient(transparent,white)] pointer-events-none\" />\r\n\r\n\t\t\t\t<Boxes />\r\n\t\t\t\t<h1 className={cn(\"md:text-4xl text-xl text-secondary relative z-20\")}>\r\n\t\t\t\t\tTailwind is Awesome\r\n\t\t\t\t</h1>\r\n\t\t\t\t<p className=\"text-center mt-2 text-secondary relative z-20\">\r\n\t\t\t\t\tFramer motion is the best animation library ngl\r\n\t\t\t\t</p>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/backgroundboxesusage.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { Boxes } from \"@/registry/open-source/background-boxes\";\r\nimport { cn } from \"@/registry/utilities/cn\";\r\n\r\nexport default function Usage() {\r\n\treturn (\r\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\r\n\t\t\t<div className=\"h-96 relative w-full overflow-hidden bg-slate-900 flex flex-col items-center justify-center rounded-lg\">\r\n\t\t\t\t<div className=\"absolute inset-0 w-full h-full bg-slate-900 z-20 mask-[radial-gradient(transparent,white)] pointer-events-none\" />\r\n\r\n\t\t\t\t<Boxes />\r\n\t\t\t\t<h1 className={cn(\"md:text-4xl text-xl text-secondary relative z-20\")}>\r\n\t\t\t\t\tTailwind is Awesome\r\n\t\t\t\t</h1>\r\n\t\t\t\t<p className=\"text-center mt-2 text-secondary relative z-20\">\r\n\t\t\t\t\tFramer motion is the best animation library ngl\r\n\t\t\t\t</p>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/background-boxes.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport { motion } from \"motion/react\";\r\n\r\nexport const BoxesCore = ({\r\n\tclassName,\r\n\trowCount = 15,\r\n\tcolumnCount = 5,\r\n\t...rest\r\n}: {\r\n\tclassName?: string;\r\n\trowCount?: number;\r\n\tcolumnCount?: number;\r\n}) => {\r\n\tconst rows = new Array(rowCount).fill(1);\r\n\tconst cols = new Array(columnCount).fill(1);\r\n\tlet colors = [\r\n\t\t\"--sky-300\",\r\n\t\t\"--pink-300\",\r\n\t\t\"--green-300\",\r\n\t\t\"--yellow-300\",\r\n\t\t\"--red-300\",\r\n\t\t\"--purple-300\",\r\n\t\t\"--blue-300\",\r\n\t\t\"--indigo-300\",\r\n\t\t\"--violet-300\",\r\n\t];\r\n\tconst getRandomColor = () => {\r\n\t\treturn colors[Math.floor(Math.random() * colors.length)];\r\n\t};\r\n\r\n\treturn (\r\n\t\t<div\r\n\t\t\tstyle={\r\n\t\t\t\t{\r\n\t\t\t\t\t// transform: `translate(-40%,-60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)`,\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\tclassName={cn(\r\n\t\t\t\t\"absolute left-1/4 p-4 -top-1/4 flex  -translate-x-1/2 -translate-y-1/2 w-full h-full z-10 \",\r\n\t\t\t\tclassName\r\n\t\t\t)}\r\n\t\t\t{...rest}\r\n\t\t>\r\n\t\t\t{rows.map((_, i) => (\r\n\t\t\t\t<motion.div\r\n\t\t\t\t\tkey={`row` + i}\r\n\t\t\t\t\t// Add  'border-l  border-slate-700' to className for borders again\r\n\t\t\t\t\tclassName=\"w-16 h-8 relative\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{cols.map((_, j) => (\r\n\t\t\t\t\t\t<motion.div\r\n\t\t\t\t\t\t\twhileHover={{\r\n\t\t\t\t\t\t\t\tbackgroundColor: `var(${getRandomColor()})`,\r\n\t\t\t\t\t\t\t\ttransition: { duration: 0 },\r\n\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\tanimate={{\r\n\t\t\t\t\t\t\t\ttransition: { duration: 2 },\r\n\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\tkey={`col` + j}\r\n\t\t\t\t\t\t\t// Add ' border-r border-t border-slate-700' to className for borders again\r\n\t\t\t\t\t\t\tclassName=\"w-16 h-8 relative\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t{j % 2 === 0 && i % 2 === 0 ? (\r\n\t\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\t\t\tstrokeWidth=\"1.5\"\r\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\t\t\tclassName=\"absolute h-6 w-10 -top-[14px] -left-[22px] text-slate-700 stroke-[1px] pointer-events-none\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\r\n\t\t\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\r\n\t\t\t\t\t\t\t\t\t\td=\"M12 6v12m6-6H6\"\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t\t) : null}\r\n\t\t\t\t\t\t</motion.div>\r\n\t\t\t\t\t))}\r\n\t\t\t\t</motion.div>\r\n\t\t\t))}\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nexport const Boxes = React.memo(BoxesCore);\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}