{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "rainbow-button",
  "title": "Rainbow Button",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "A button with a border of theme colors circling it and a glow on hover, built on the Ballmac button so every size, variant and focus state still works.",
  "dependencies": [
    "motion@^12"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/button.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/rainbow-button.tsx",
      "content": "// Ballmac UI: Rainbow Button. https://ui.ballmac.com/components/rainbow-button\n\"use client\"\n\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\n\nimport { Button, type ButtonProps } from \"@/components/ballmac/button\"\nimport { cn } from \"@/lib/utils\"\n\ntype RainbowButtonProps = Omit<ButtonProps, \"asChild\"> & {\n  /** Seconds for the colors to travel once around the border. */\n  duration?: number\n  /** Show a soft glow of the same colors under the button. */\n  glow?: boolean\n  /** Classes for the wrapper that draws the border. */\n  wrapperClassName?: string\n}\n\nconst GRADIENT =\n  \"conic-gradient(from 0deg, var(--chart-1), var(--chart-2), var(--chart-3), var(--chart-4), var(--chart-5), var(--chart-1))\"\n\nfunction RainbowButton({ duration = 4, glow = true, shape, className, wrapperClassName, disabled, children, ...props }: RainbowButtonProps) {\n  const reduce = useReducedMotion()\n  const radius = shape === \"pill\" ? \"rounded-full\" : \"rounded-md\"\n  const innerRadius = shape === \"pill\" ? \"rounded-full\" : \"rounded-[calc(var(--radius-md)-2px)]\"\n\n  return (\n    <span\n      data-slot=\"rainbow-button\"\n      className={cn(\"group/rainbow relative inline-flex isolate\", radius, disabled && \"opacity-60\", wrapperClassName)}\n    >\n      {glow && (\n        <span aria-hidden=\"true\" className={cn(\"pointer-events-none absolute -inset-1 -z-10 overflow-hidden opacity-0 blur-md transition-opacity duration-300 group-hover/rainbow:opacity-60 group-focus-within/rainbow:opacity-60 motion-reduce:transition-none\", radius)}>\n          <motion.span\n            className=\"absolute -inset-[100%]\"\n            style={{ background: GRADIENT }}\n            animate={reduce ? undefined : { rotate: 360 }}\n            transition={{ duration, repeat: Infinity, ease: \"linear\" }}\n          />\n        </span>\n      )}\n      <span aria-hidden=\"true\" className={cn(\"pointer-events-none absolute inset-0 overflow-hidden\", radius)}>\n        <motion.span\n          className=\"absolute -inset-[100%]\"\n          style={{ background: GRADIENT }}\n          animate={reduce ? undefined : { rotate: 360 }}\n          transition={{ duration, repeat: Infinity, ease: \"linear\" }}\n        />\n      </span>\n      <Button\n        shape={shape}\n        disabled={disabled}\n        className={cn(\"m-[2px] border-0\", innerRadius, className)}\n        {...props}\n      >\n        {children}\n      </Button>\n    </span>\n  )\n}\n\nexport { RainbowButton, type RainbowButtonProps }\n",
      "type": "registry:ui",
      "target": "@components/ballmac/rainbow-button.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "button",
      "gradient",
      "border",
      "glow",
      "cta"
    ],
    "version": "1.0.0",
    "updated": "2026-10-01",
    "ai": {
      "summary": "Use like <Button>: <RainbowButton size variant shape duration glow>Label</RainbowButton>. Best with default, secondary or outline variants (the inside needs a background).",
      "whenToUse": [
        "The single most important call to action on a page",
        "Upgrade and launch prompts"
      ],
      "whenNotToUse": [
        "Several buttons on one screen",
        "Ghost buttons (no background to sit on the border)"
      ],
      "composesWith": [
        "button",
        "shiny-button",
        "pulse-button"
      ],
      "a11y": [
        {
          "keys": "Enter / Space",
          "action": "Activates like any button"
        },
        {
          "keys": "Focus",
          "action": "The standard focus ring and the glow both appear on keyboard focus"
        },
        {
          "keys": "Reduced motion",
          "action": "The border is a still gradient"
        }
      ],
      "customization": [
        "duration",
        "glow",
        "shape: default | pill",
        "all Button props"
      ]
    },
    "examples": [
      "rainbow-button-demo",
      "rainbow-button-sizes"
    ],
    "url": "https://ui.ballmac.com/components/rainbow-button"
  },
  "categories": [
    "motion"
  ],
  "type": "registry:ui"
}