{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"ui-rainbow-button","type":"registry:component","title":"Rainbow Button","description":"Gradient-accented button primitive with animated color treatment.","version":"1.0.0","status":"ga","files":[{"path":"src/components/ui/rainbow-button.tsx","type":"registry:component","content":"import * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\ntype RainbowButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>\n\nexport const RainbowButton = React.forwardRef<HTMLButtonElement, RainbowButtonProps>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <button\n        ref={ref}\n        className={cn(\n          'group animate-rainbow text-primary-foreground focus-visible:ring-ring/50 relative inline-flex size-9 cursor-pointer items-center justify-center rounded-md border-2 border-transparent bg-[length:200%] [background-clip:padding-box,border-box,border-box] [background-origin:border-box] font-medium transition-colors focus-visible:ring-[3px] focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n\n          // before styles\n          'before:animate-rainbow before:absolute before:bottom-[-20%] before:left-0 before:z-0 before:h-1/5 before:w-full before:bg-[linear-gradient(90deg,#ff4242,#a1ff42,#42a1ff,#42d0ff,#a142ff)] before:[filter:blur(calc(0.625*1rem))]',\n\n          // bg styles\n          'bg-[linear-gradient(var(--primary),var(--primary)),linear-gradient(var(--primary)_30%,rgba(0,0,0,0)),linear-gradient(90deg,#ff4242,#a1ff42,#42a1ff,#42d0ff,#a142ff)]',\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </button>\n    )\n  }\n)\n\nRainbowButton.displayName = 'RainbowButton'\n"}]}