{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "rainbow-button",
  "type": "registry:ui",
  "title": "Rainbow Button",
  "description": "An animated button with a rainbow effect.",
  "files": [
    {
      "path": "registry/magicui/rainbow-button.tsx",
      "content": "import React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst rainbowButtonVariants = cva(\n  cn(\n    \"relative cursor-pointer group transition-all animate-rainbow\",\n    \"inline-flex items-center justify-center gap-2 shrink-0\",\n    \"rounded-sm outline-none focus-visible:ring-[3px] aria-invalid:border-destructive\",\n    \"text-sm font-medium whitespace-nowrap\",\n    \"disabled:pointer-events-none disabled:opacity-50\",\n    \"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0\"\n  ),\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-0 bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))] bg-[length:200%] text-primary-foreground [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.125rem)_solid_transparent] before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))] before:bg-[length:200%] before:[filter:blur(0.75rem)] dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))]\",\n        outline:\n          \"border border-input border-b-transparent bg-[linear-gradient(#ffffff,#ffffff),linear-gradient(#ffffff_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))] bg-[length:200%] text-accent-foreground [background-clip:padding-box,border-box,border-box] [background-origin:border-box] before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))] before:bg-[length:200%] before:[filter:blur(0.75rem)] dark:bg-[linear-gradient(#0a0a0a,#0a0a0a),linear-gradient(#0a0a0a_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,var(--color-1),var(--color-5),var(--color-3),var(--color-4),var(--color-2))]\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2\",\n        sm: \"h-8 rounded-xl px-3 text-xs\",\n        lg: \"h-11 rounded-xl px-8\",\n        icon: \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\ninterface RainbowButtonProps\n  extends\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof rainbowButtonVariants> {\n  asChild?: boolean\n}\n\nconst RainbowButton = React.forwardRef<HTMLButtonElement, RainbowButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\"\n    return (\n      <Comp\n        data-slot=\"button\"\n        className={cn(rainbowButtonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\n\nRainbowButton.displayName = \"RainbowButton\"\n\nexport { RainbowButton, rainbowButtonVariants, type RainbowButtonProps }\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "animate-rainbow": "rainbow var(--speed, 2s) infinite linear"
    },
    "light": {
      "color-1": "oklch(66.2% 0.225 25.9)",
      "color-2": "oklch(60.4% 0.26 302)",
      "color-3": "oklch(69.6% 0.165 251)",
      "color-4": "oklch(80.2% 0.134 225)",
      "color-5": "oklch(90.7% 0.231 133)"
    },
    "dark": {
      "color-1": "oklch(66.2% 0.225 25.9)",
      "color-2": "oklch(60.4% 0.26 302)",
      "color-3": "oklch(69.6% 0.165 251)",
      "color-4": "oklch(80.2% 0.134 225)",
      "color-5": "oklch(90.7% 0.231 133)"
    }
  },
  "css": {
    "@keyframes rainbow": {
      "0%": {
        "background-position": "0%"
      },
      "100%": {
        "background-position": "200%"
      }
    }
  }
}