{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "background-gradient",
  "type": "registry:block",
  "title": "Background gradient",
  "description": "Background gradient",
  "files": [
    {
      "path": "components/usages/backgroundgradientusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { BackgroundGradient } from \"@/registry/open-source/background-gradient\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<div>\n\t\t\t\t<BackgroundGradient className=\"rounded-[22px] max-w-sm p-4 sm:p-10 bg-background dark:bg-background\">\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={`/itjustworks.jpg`}\n\t\t\t\t\t\talt=\"jordans\"\n\t\t\t\t\t\theight=\"400\"\n\t\t\t\t\t\twidth=\"400\"\n\t\t\t\t\t\tclassName=\"object-contain\"\n\t\t\t\t\t/>\n\t\t\t\t\t<p className=\"text-base sm:text-xl text-secondary mt-4 mb-2 dark:text-secondary\">\n\t\t\t\t\t\tAir Jordan 4 Retro Reimagined\n\t\t\t\t\t</p>\n\n\t\t\t\t\t<p className=\"text-sm text-secondary dark:text-secondary\">\n\t\t\t\t\t\tThe Air Jordan 4 Retro Reimagined Bred will release on\n\t\t\t\t\t\tSaturday, February 17, 2024. Your best opportunity to get\n\t\t\t\t\t\tthese right now is by entering raffles and waiting for the\n\t\t\t\t\t\tofficial releases.\n\t\t\t\t\t</p>\n\t\t\t\t\t<button className=\"rounded-full pl-4 pr-1 py-1 text-secondary flex items-center space-x-1 bg-background mt-4 text-xs font-bold dark:bg-background\">\n\t\t\t\t\t\t<span>Buy now </span>\n\t\t\t\t\t\t<span className=\"bg-background rounded-full text-[0.6rem] px-2 py-0 text-secondary\">\n\t\t\t\t\t\t\t$100\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\t\t\t\t</BackgroundGradient>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/backgroundgradientusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { BackgroundGradient } from \"@/registry/open-source/background-gradient\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<div>\n\t\t\t\t<BackgroundGradient className=\"rounded-[22px] max-w-sm p-4 sm:p-10 bg-background dark:bg-background\">\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={`/itjustworks.jpg`}\n\t\t\t\t\t\talt=\"jordans\"\n\t\t\t\t\t\theight=\"400\"\n\t\t\t\t\t\twidth=\"400\"\n\t\t\t\t\t\tclassName=\"object-contain\"\n\t\t\t\t\t/>\n\t\t\t\t\t<p className=\"text-base sm:text-xl text-secondary mt-4 mb-2 dark:text-secondary\">\n\t\t\t\t\t\tAir Jordan 4 Retro Reimagined\n\t\t\t\t\t</p>\n\n\t\t\t\t\t<p className=\"text-sm text-secondary dark:text-secondary\">\n\t\t\t\t\t\tThe Air Jordan 4 Retro Reimagined Bred will release on\n\t\t\t\t\t\tSaturday, February 17, 2024. Your best opportunity to get\n\t\t\t\t\t\tthese right now is by entering raffles and waiting for the\n\t\t\t\t\t\tofficial releases.\n\t\t\t\t\t</p>\n\t\t\t\t\t<button className=\"rounded-full pl-4 pr-1 py-1 text-secondary flex items-center space-x-1 bg-background mt-4 text-xs font-bold dark:bg-background\">\n\t\t\t\t\t\t<span>Buy now </span>\n\t\t\t\t\t\t<span className=\"bg-background rounded-full text-[0.6rem] px-2 py-0 text-secondary\">\n\t\t\t\t\t\t\t$100\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\t\t\t\t</BackgroundGradient>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/background-gradient.tsx",
      "content": "import React from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport { motion } from \"motion/react\";\n\nexport const BackgroundGradient = ({\n\tchildren,\n\tclassName,\n\tcontainerClassName,\n\tanimate = true,\n}: {\n\tchildren?: React.ReactNode;\n\tclassName?: string;\n\tcontainerClassName?: string;\n\tanimate?: boolean;\n}) => {\n\tconst variants = {\n\t\tinitial: {\n\t\t\tbackgroundPosition: \"0 50%\",\n\t\t},\n\t\tanimate: {\n\t\t\tbackgroundPosition: [\"0, 50%\", \"100% 50%\", \"0 50%\"],\n\t\t},\n\t};\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"relative p-[4px] group max-w-sm\", containerClassName)}\n\t\t>\n\t\t\t<motion.div\n\t\t\t\tvariants={animate ? variants : undefined}\n\t\t\t\tinitial={animate ? \"initial\" : undefined}\n\t\t\t\tanimate={animate ? \"animate\" : undefined}\n\t\t\t\ttransition={\n\t\t\t\t\tanimate\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tduration: 5,\n\t\t\t\t\t\t\t\trepeat: Infinity,\n\t\t\t\t\t\t\t\trepeatType: \"reverse\",\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundSize: animate ? \"400% 400%\" : undefined,\n\t\t\t\t}}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"absolute inset-0 rounded-3xl z-1 opacity-60 group-hover:opacity-100 blur-xl  transition duration-500\",\n\t\t\t\t\t\" bg-[radial-gradient(circle_farthest-side_at_0_100%,#00ccb1,transparent),radial-gradient(circle_farthest-side_at_100%_0,#7b61ff,transparent),radial-gradient(circle_farthest-side_at_100%_100%,#ffc414,transparent),radial-gradient(circle_farthest-side_at_0_0,#1ca0fb,#141316)]\"\n\t\t\t\t)}\n\t\t\t/>\n\t\t\t<motion.div\n\t\t\t\tvariants={animate ? variants : undefined}\n\t\t\t\tinitial={animate ? \"initial\" : undefined}\n\t\t\t\tanimate={animate ? \"animate\" : undefined}\n\t\t\t\ttransition={\n\t\t\t\t\tanimate\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tduration: 5,\n\t\t\t\t\t\t\t\trepeat: Infinity,\n\t\t\t\t\t\t\t\trepeatType: \"reverse\",\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundSize: animate ? \"400% 400%\" : undefined,\n\t\t\t\t}}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"absolute inset-0 rounded-3xl z-1\",\n\t\t\t\t\t\"bg-[radial-gradient(circle_farthest-side_at_0_100%,#00ccb1,transparent),radial-gradient(circle_farthest-side_at_100%_0,#7b61ff,transparent),radial-gradient(circle_farthest-side_at_100%_100%,#ffc414,transparent),radial-gradient(circle_farthest-side_at_0_0,#1ca0fb,#141316)]\"\n\t\t\t\t)}\n\t\t\t/>\n\n\t\t\t<div className={cn(\"relative z-10\", className)}>{children}</div>\n\t\t</div>\n\t);\n};\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"
    }
  ]
}