{
  "slug": "candy-button",
  "name": "Candy Button",
  "description": "Tactile glossy button with specular reflection highlights, multi-layer depth shadows, and full color customization.",
  "summary": "An ultra-tactile call-to-action button featuring physical glass reflections, convex radial gradients, multi-layer ambient caustic drop shadows, and inset bevel illumination. Supports instant dynamic color customization via CSS color-mix() as well as seven hand-tuned preset gemstone flavors (emerald, ruby, amber, violet, azure, obsidian, and pearl) with hardware-accelerated press compression.",
  "category": "buttons",
  "tags": [
    "button",
    "candy",
    "glossy",
    "specular",
    "reflection",
    "3d",
    "tactile",
    "shadow",
    "micro-interactions"
  ],
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "version": "1.0.0",
  "createdDate": "2026-09-21",
  "updatedDate": "2026-09-21",
  "interactive": true,
  "supportsColor": true,
  "highlights": [
    "Convex radial gradient placing the specular bloom at 50% 70%",
    "Sub-pixel specular glass reflection line (h-px with linear gradient falloff) across the upper rim",
    "Multi-layered composite lighting: outer ambient caustics, inset top bevel highlight, and underside depth rim",
    "Dynamic arbitrary color engine supporting any hex, rgb, or hsl value through native CSS color-mix()",
    "Seven preset palettes: emerald, ruby, amber, violet, azure, obsidian and pearl",
    "Four precision size variants (sm, default, lg, icon) with automatic accessory icon scaling",
    "Smooth hardware-accelerated tactile compression (scale-[0.98]) and hover luminescence"
  ],
  "anatomy": [
    "<button> (Interactive shell with radial gradient and multi-stop composite shadow; renders <a> when as=\"a\" or href is set)",
    "<span> (Specular Reflection Line anchored to the top 15%-85% perimeter)",
    "<span> (Translucent glass sheen dome layer providing convex highlight)",
    "<span> (Centered content shell housing leftIcon, label, and rightIcon)"
  ],
  "physics": {
    "engine": "CSS Radial Shaders & Specular Insets",
    "description": "Physical material optics calculated via layered radial gradients, composite inset bevels, and sub-pixel linear reflection sweeps.",
    "parameters": [
      {
        "label": "Gradient Geometry",
        "value": "radial-gradient(120% 80% at 50% 70%)"
      },
      {
        "label": "Reflection Line",
        "value": "1px linear-gradient(90deg, transparent, 55% white, transparent)"
      },
      {
        "label": "Top Inset Bevel",
        "value": "inset 0px 1px 4px 0px rgba(255,255,255,0.4) (0.45 for custom color)"
      },
      {
        "label": "Bottom Inset Depth",
        "value": "inset 0px -2px 4px 0px rgba(0,0,0,0.15) (0.2 obsidian, 0.08 pearl)"
      },
      {
        "label": "Outer Ambient Glow",
        "value": "0px 4px 24px -6px color-mix(65% color, transparent)"
      },
      {
        "label": "Active Compression",
        "value": "scale-[0.98] with 95% brightness"
      },
      {
        "label": "Transition Curve",
        "value": "200ms ease-out"
      }
    ]
  },
  "accessibility": {
    "role": "button",
    "aria": "Inherits standard HTML button attributes including aria-label, aria-disabled, and aria-expanded.",
    "reducedMotion": "No reduced-motion handling. The press scale and brightness transitions always run.",
    "keyboard": [
      {
        "key": "Tab",
        "description": "Focus the button."
      },
      {
        "key": "Enter / Space",
        "description": "Activate the button. When rendered as a link, only Enter activates it."
      }
    ]
  },
  "guidelines": {
    "recommended": [
      "High-conversion call-to-action triggers on modern dark-mode landing pages",
      "Primary action buttons in modals, checkout experiences, and SaaS dashboards",
      "Playful, tactile interactive controls in creative tooling and consumer web applications"
    ],
    "bestPractices": [
      "Use the emerald or custom brand color for primary triggers, reserving obsidian or pearl for auxiliary actions",
      "Pair with concise action-oriented verbs (e.g., 'Get Started', 'Deploy Project', 'Claim Access')",
      "Ensure custom hex colors maintain at least 4.5:1 text contrast against white text"
    ]
  },
  "props": [
    {
      "name": "as",
      "type": "React.ElementType",
      "description": "Pass \"a\" to render an anchor instead of a button."
    },
    {
      "name": "href",
      "type": "string",
      "description": "Link URL. When set, the button renders as an anchor."
    },
    {
      "name": "target",
      "type": "string",
      "description": "Anchor target, used when rendering as a link."
    },
    {
      "name": "rel",
      "type": "string",
      "description": "Anchor rel attribute, used when rendering as a link."
    },
    {
      "name": "variant",
      "type": "\"emerald\" | \"ruby\" | \"amber\" | \"violet\" | \"azure\" | \"obsidian\" | \"pearl\"",
      "defaultValue": "\"emerald\"",
      "description": "Preset gemstone color palette with tuned shadows and gradients."
    },
    {
      "name": "color",
      "type": "string",
      "defaultValue": "undefined",
      "description": "Custom arbitrary hex, rgb, or hsl color. When supplied, dynamically computes radial gradients and shadows."
    },
    {
      "name": "size",
      "type": "\"sm\" | \"default\" | \"lg\" | \"icon\"",
      "defaultValue": "\"default\"",
      "description": "Button dimensions, paddings, and font sizes."
    },
    {
      "name": "glow",
      "type": "boolean",
      "defaultValue": "true",
      "description": "Enable or disable outer ambient colored drop shadow caustics."
    },
    {
      "name": "glassSheen",
      "type": "boolean",
      "defaultValue": "true",
      "description": "Renders translucent upper glass dome reflection sheen."
    },
    {
      "name": "leftIcon",
      "type": "React.ReactNode",
      "defaultValue": "undefined",
      "description": "Icon element rendered before the button label with automatic size calibration."
    },
    {
      "name": "rightIcon",
      "type": "React.ReactNode",
      "defaultValue": "undefined",
      "description": "Icon element rendered after the button label with automatic size calibration."
    },
    {
      "name": "className",
      "type": "string",
      "defaultValue": "undefined",
      "description": "Additional CSS classes to override dimensions, margins, or positioning."
    }
  ],
  "usage": "import { CandyButton } from \"@/components/ui/candy-button\";\n\nexport function CandyButtonDemo() {\n  return <CandyButton variant=\"emerald\">Deploy project</CandyButton>;\n}",
  "files": [
    {
      "name": "candy-button.tsx",
      "path": "registry/ui/candy-button.tsx",
      "code": "\"use client\";\n\nimport React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type CandyButtonVariant =\n  | \"emerald\"\n  | \"ruby\"\n  | \"amber\"\n  | \"violet\"\n  | \"azure\"\n  | \"obsidian\"\n  | \"pearl\";\n\nexport type CandyButtonSize = \"sm\" | \"default\" | \"lg\" | \"icon\";\n\nexport interface CandyButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  as?: React.ElementType;\n  href?: string;\n  target?: string;\n  rel?: string;\n  variant?: CandyButtonVariant;\n  size?: CandyButtonSize;\n  color?: string;\n  glow?: boolean;\n  glassSheen?: boolean;\n  leftIcon?: React.ReactNode;\n  rightIcon?: React.ReactNode;\n}\n\nconst variantStyles: Record<CandyButtonVariant, string> = {\n  emerald:\n    \"bg-[radial-gradient(120%_80%_at_50%_70%,#006a66_0%,#003835_100%)] text-white shadow-[0px_4px_24px_-6px_rgba(0,106,102,0.5),inset_0px_1px_4px_0px_rgba(255,255,255,0.4),inset_0px_-2px_4px_0px_rgba(0,0,0,0.15)] hover:shadow-[0px_6px_28px_-4px_rgba(0,106,102,0.65),inset_0px_1px_4px_0px_rgba(255,255,255,0.5),inset_0px_-2px_4px_0px_rgba(0,0,0,0.15)]\",\n  ruby: \"bg-[radial-gradient(120%_80%_at_50%_70%,#e11d48_0%,#9f1239_100%)] text-white shadow-[0px_4px_24px_-6px_rgba(225,29,72,0.5),inset_0px_1px_4px_0px_rgba(255,255,255,0.4),inset_0px_-2px_4px_0px_rgba(0,0,0,0.15)] hover:shadow-[0px_6px_28px_-4px_rgba(225,29,72,0.65),inset_0px_1px_4px_0px_rgba(255,255,255,0.5),inset_0px_-2px_4px_0px_rgba(0,0,0,0.15)]\",\n  amber:\n    \"bg-[radial-gradient(120%_80%_at_50%_70%,#f59e0b_0%,#b45309_100%)] text-white shadow-[0px_4px_24px_-6px_rgba(245,158,11,0.5),inset_0px_1px_4px_0px_rgba(255,255,255,0.4),inset_0px_-2px_4px_0px_rgba(0,0,0,0.15)] hover:shadow-[0px_6px_28px_-4px_rgba(245,158,11,0.65),inset_0px_1px_4px_0px_rgba(255,255,255,0.5),inset_0px_-2px_4px_0px_rgba(0,0,0,0.15)]\",\n  violet:\n    \"bg-[radial-gradient(120%_80%_at_50%_70%,#8b5cf6_0%,#581c87_100%)] text-white shadow-[0px_4px_24px_-6px_rgba(139,92,246,0.5),inset_0px_1px_4px_0px_rgba(255,255,255,0.4),inset_0px_-2px_4px_0px_rgba(0,0,0,0.15)] hover:shadow-[0px_6px_28px_-4px_rgba(139,92,246,0.65),inset_0px_1px_4px_0px_rgba(255,255,255,0.5),inset_0px_-2px_4px_0px_rgba(0,0,0,0.15)]\",\n  azure:\n    \"bg-[radial-gradient(120%_80%_at_50%_70%,#0ea5e9_0%,#0369a1_100%)] text-white shadow-[0px_4px_24px_-6px_rgba(14,165,233,0.5),inset_0px_1px_4px_0px_rgba(255,255,255,0.4),inset_0px_-2px_4px_0px_rgba(0,0,0,0.15)] hover:shadow-[0px_6px_28px_-4px_rgba(14,165,233,0.65),inset_0px_1px_4px_0px_rgba(255,255,255,0.5),inset_0px_-2px_4px_0px_rgba(0,0,0,0.15)]\",\n  obsidian:\n    \"bg-[radial-gradient(120%_80%_at_50%_70%,#3f3f46_0%,#18181b_100%)] text-zinc-100 border border-white/10 shadow-[0px_4px_20px_-6px_rgba(0,0,0,0.4),inset_0px_1px_3px_0px_rgba(255,255,255,0.25),inset_0px_-2px_4px_0px_rgba(0,0,0,0.2)] hover:shadow-[0px_6px_24px_-4px_rgba(0,0,0,0.5),inset_0px_1px_3px_0px_rgba(255,255,255,0.35),inset_0px_-2px_4px_0px_rgba(0,0,0,0.2)]\",\n  pearl:\n    \"bg-[radial-gradient(120%_80%_at_50%_70%,#ffffff_0%,#e4e4e7_100%)] text-zinc-950 shadow-[0px_4px_20px_-6px_rgba(255,255,255,0.35),inset_0px_1px_3px_0px_rgba(255,255,255,0.9),inset_0px_-2px_4px_0px_rgba(0,0,0,0.08)] hover:shadow-[0px_6px_24px_-4px_rgba(255,255,255,0.45),inset_0px_1px_3px_0px_rgba(255,255,255,1),inset_0px_-2px_4px_0px_rgba(0,0,0,0.08)]\",\n};\n\nconst sizeStyles: Record<CandyButtonSize, string> = {\n  sm: \"h-8 px-3.5 text-xs rounded-lg gap-1.5 [&_svg]:size-3.5\",\n  default: \"h-10 px-5 text-sm rounded-xl gap-2 [&_svg]:size-4\",\n  lg: \"h-12 px-7 text-base rounded-2xl gap-2.5 [&_svg]:size-5\",\n  icon: \"size-10 p-0 rounded-xl gap-0 [&_svg]:size-4\",\n};\n\nexport const CandyButton = React.forwardRef<\n  HTMLElement,\n  CandyButtonProps\n>(\n  (\n    {\n      as,\n      className,\n      children,\n      variant = \"emerald\",\n      size = \"default\",\n      color,\n      glow = true,\n      glassSheen = true,\n      leftIcon,\n      rightIcon,\n      style,\n      disabled,\n      ...props\n    },\n    ref,\n  ) => {\n    const isCustom = Boolean(color);\n\n    const customStyle: React.CSSProperties = isCustom\n      ? {\n          background: `radial-gradient(120% 80% at 50% 70%, ${color} 0%, color-mix(in srgb, ${color} 50%, black) 100%)`,\n          boxShadow: glow\n            ? `0px 4px 24px -6px color-mix(in srgb, ${color} 65%, transparent), inset 0px 1px 4px 0px rgba(255, 255, 255, 0.45), inset 0px -2px 4px 0px rgba(0, 0, 0, 0.15)`\n            : `inset 0px 1px 4px 0px rgba(255, 255, 255, 0.45), inset 0px -2px 4px 0px rgba(0, 0, 0, 0.15)`,\n          color: \"#ffffff\",\n          ...style,\n        }\n      : (style ?? {});\n\n    const commonClass = cn(\n      \"relative inline-flex items-center justify-center font-medium leading-none tracking-[0.01em] select-none overflow-hidden cursor-pointer transition-all duration-200 ease-out active:scale-[0.98] active:brightness-95 hover:brightness-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 focus-visible:ring-offset-2 focus-visible:ring-offset-black disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed\",\n      \"after:absolute after:top-0 after:left-[15%] after:right-[15%] after:h-px after:bg-[linear-gradient(90deg,transparent,rgba(255,255,255,0.55),transparent)] after:pointer-events-none\",\n      !isCustom && variantStyles[variant],\n      sizeStyles[size],\n      className,\n    );\n\n    const innerContent = (\n      <>\n        {glassSheen && (\n          <span className=\"absolute inset-x-0 top-0 h-1/2 rounded-t-[inherit] bg-[linear-gradient(180deg,rgba(255,255,255,0.12)_0%,transparent_100%)] pointer-events-none\" />\n        )}\n        <span className=\"relative z-10 inline-flex items-center justify-center gap-2\">\n          {leftIcon && <span className=\"shrink-0\">{leftIcon}</span>}\n          {children}\n          {rightIcon && <span className=\"shrink-0\">{rightIcon}</span>}\n        </span>\n      </>\n    );\n\n    if (as === \"a\" || props.href) {\n      return (\n        <a\n          ref={ref as React.Ref<HTMLAnchorElement>}\n          href={props.href}\n          target={props.target}\n          rel={props.rel}\n          style={customStyle}\n          className={commonClass}\n          aria-disabled={disabled}\n          role=\"button\"\n          {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n        >\n          {innerContent}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        ref={ref as React.Ref<HTMLButtonElement>}\n        disabled={disabled}\n        style={customStyle}\n        className={commonClass}\n        {...props}\n      >\n        {innerContent}\n      </button>\n    );\n  },\n);\n\nCandyButton.displayName = \"CandyButton\";\n\nexport default CandyButton;\n",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type CandyButtonVariant =\n  | \"emerald\"\n  | \"ruby\"\n  | \"amber\"\n  | \"violet\"\n  | \"azure\"\n  | \"obsidian\"\n  | \"pearl\";\n\nexport type CandyButtonSize = \"sm\" | \"default\" | \"lg\" | \"icon\";\n\nexport interface CandyButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  as?: React.ElementType;\n  href?: string;\n  target?: string;\n  rel?: string;\n  variant?: CandyButtonVariant;\n  size?: CandyButtonSize;\n  color?: string;\n  glow?: boolean;\n  glassSheen?: boolean;\n  leftIcon?: React.ReactNode;\n  rightIcon?: React.ReactNode;\n}\n\nconst variantStyles: Record<CandyButtonVariant, string> = {\n  emerald:\n    \"bg-[radial-gradient(120%_80%_at_50%_70%,#006a66_0%,#003835_100%)] text-white shadow-[0px_4px_24px_-6px_rgba(0,106,102,0.5),inset_0px_1px_4px_0px_rgba(255,255,255,0.4),inset_0px_-2px_4px_0px_rgba(0,0,0,0.15)] hover:shadow-[0px_6px_28px_-4px_rgba(0,106,102,0.65),inset_0px_1px_4px_0px_rgba(255,255,255,0.5),inset_0px_-2px_4px_0px_rgba(0,0,0,0.15)]\",\n  ruby: \"bg-[radial-gradient(120%_80%_at_50%_70%,#e11d48_0%,#9f1239_100%)] text-white shadow-[0px_4px_24px_-6px_rgba(225,29,72,0.5),inset_0px_1px_4px_0px_rgba(255,255,255,0.4),inset_0px_-2px_4px_0px_rgba(0,0,0,0.15)] hover:shadow-[0px_6px_28px_-4px_rgba(225,29,72,0.65),inset_0px_1px_4px_0px_rgba(255,255,255,0.5),inset_0px_-2px_4px_0px_rgba(0,0,0,0.15)]\",\n  amber:\n    \"bg-[radial-gradient(120%_80%_at_50%_70%,#f59e0b_0%,#b45309_100%)] text-white shadow-[0px_4px_24px_-6px_rgba(245,158,11,0.5),inset_0px_1px_4px_0px_rgba(255,255,255,0.4),inset_0px_-2px_4px_0px_rgba(0,0,0,0.15)] hover:shadow-[0px_6px_28px_-4px_rgba(245,158,11,0.65),inset_0px_1px_4px_0px_rgba(255,255,255,0.5),inset_0px_-2px_4px_0px_rgba(0,0,0,0.15)]\",\n  violet:\n    \"bg-[radial-gradient(120%_80%_at_50%_70%,#8b5cf6_0%,#581c87_100%)] text-white shadow-[0px_4px_24px_-6px_rgba(139,92,246,0.5),inset_0px_1px_4px_0px_rgba(255,255,255,0.4),inset_0px_-2px_4px_0px_rgba(0,0,0,0.15)] hover:shadow-[0px_6px_28px_-4px_rgba(139,92,246,0.65),inset_0px_1px_4px_0px_rgba(255,255,255,0.5),inset_0px_-2px_4px_0px_rgba(0,0,0,0.15)]\",\n  azure:\n    \"bg-[radial-gradient(120%_80%_at_50%_70%,#0ea5e9_0%,#0369a1_100%)] text-white shadow-[0px_4px_24px_-6px_rgba(14,165,233,0.5),inset_0px_1px_4px_0px_rgba(255,255,255,0.4),inset_0px_-2px_4px_0px_rgba(0,0,0,0.15)] hover:shadow-[0px_6px_28px_-4px_rgba(14,165,233,0.65),inset_0px_1px_4px_0px_rgba(255,255,255,0.5),inset_0px_-2px_4px_0px_rgba(0,0,0,0.15)]\",\n  obsidian:\n    \"bg-[radial-gradient(120%_80%_at_50%_70%,#3f3f46_0%,#18181b_100%)] text-zinc-100 border border-white/10 shadow-[0px_4px_20px_-6px_rgba(0,0,0,0.4),inset_0px_1px_3px_0px_rgba(255,255,255,0.25),inset_0px_-2px_4px_0px_rgba(0,0,0,0.2)] hover:shadow-[0px_6px_24px_-4px_rgba(0,0,0,0.5),inset_0px_1px_3px_0px_rgba(255,255,255,0.35),inset_0px_-2px_4px_0px_rgba(0,0,0,0.2)]\",\n  pearl:\n    \"bg-[radial-gradient(120%_80%_at_50%_70%,#ffffff_0%,#e4e4e7_100%)] text-zinc-950 shadow-[0px_4px_20px_-6px_rgba(255,255,255,0.35),inset_0px_1px_3px_0px_rgba(255,255,255,0.9),inset_0px_-2px_4px_0px_rgba(0,0,0,0.08)] hover:shadow-[0px_6px_24px_-4px_rgba(255,255,255,0.45),inset_0px_1px_3px_0px_rgba(255,255,255,1),inset_0px_-2px_4px_0px_rgba(0,0,0,0.08)]\",\n};\n\nconst sizeStyles: Record<CandyButtonSize, string> = {\n  sm: \"h-8 px-3.5 text-xs rounded-lg gap-1.5 [&_svg]:size-3.5\",\n  default: \"h-10 px-5 text-sm rounded-xl gap-2 [&_svg]:size-4\",\n  lg: \"h-12 px-7 text-base rounded-2xl gap-2.5 [&_svg]:size-5\",\n  icon: \"size-10 p-0 rounded-xl gap-0 [&_svg]:size-4\",\n};\n\nexport const CandyButton = React.forwardRef<\n  HTMLElement,\n  CandyButtonProps\n>(\n  (\n    {\n      as,\n      className,\n      children,\n      variant = \"emerald\",\n      size = \"default\",\n      color,\n      glow = true,\n      glassSheen = true,\n      leftIcon,\n      rightIcon,\n      style,\n      disabled,\n      ...props\n    },\n    ref,\n  ) => {\n    const isCustom = Boolean(color);\n\n    const customStyle: React.CSSProperties = isCustom\n      ? {\n          background: `radial-gradient(120% 80% at 50% 70%, ${color} 0%, color-mix(in srgb, ${color} 50%, black) 100%)`,\n          boxShadow: glow\n            ? `0px 4px 24px -6px color-mix(in srgb, ${color} 65%, transparent), inset 0px 1px 4px 0px rgba(255, 255, 255, 0.45), inset 0px -2px 4px 0px rgba(0, 0, 0, 0.15)`\n            : `inset 0px 1px 4px 0px rgba(255, 255, 255, 0.45), inset 0px -2px 4px 0px rgba(0, 0, 0, 0.15)`,\n          color: \"#ffffff\",\n          ...style,\n        }\n      : (style ?? {});\n\n    const commonClass = cn(\n      \"relative inline-flex items-center justify-center font-medium leading-none tracking-[0.01em] select-none overflow-hidden cursor-pointer transition-all duration-200 ease-out active:scale-[0.98] active:brightness-95 hover:brightness-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 focus-visible:ring-offset-2 focus-visible:ring-offset-black disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed\",\n      \"after:absolute after:top-0 after:left-[15%] after:right-[15%] after:h-px after:bg-[linear-gradient(90deg,transparent,rgba(255,255,255,0.55),transparent)] after:pointer-events-none\",\n      !isCustom && variantStyles[variant],\n      sizeStyles[size],\n      className,\n    );\n\n    const innerContent = (\n      <>\n        {glassSheen && (\n          <span className=\"absolute inset-x-0 top-0 h-1/2 rounded-t-[inherit] bg-[linear-gradient(180deg,rgba(255,255,255,0.12)_0%,transparent_100%)] pointer-events-none\" />\n        )}\n        <span className=\"relative z-10 inline-flex items-center justify-center gap-2\">\n          {leftIcon && <span className=\"shrink-0\">{leftIcon}</span>}\n          {children}\n          {rightIcon && <span className=\"shrink-0\">{rightIcon}</span>}\n        </span>\n      </>\n    );\n\n    if (as === \"a\" || props.href) {\n      return (\n        <a\n          ref={ref as React.Ref<HTMLAnchorElement>}\n          href={props.href}\n          target={props.target}\n          rel={props.rel}\n          style={customStyle}\n          className={commonClass}\n          aria-disabled={disabled}\n          role=\"button\"\n          {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n        >\n          {innerContent}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        ref={ref as React.Ref<HTMLButtonElement>}\n        disabled={disabled}\n        style={customStyle}\n        className={commonClass}\n        {...props}\n      >\n        {innerContent}\n      </button>\n    );\n  },\n);\n\nCandyButton.displayName = \"CandyButton\";\n\nexport default CandyButton;\n",
      "type": "registry:ui",
      "target": "@ui/candy-button.tsx"
    }
  ],
  "type": "registry:ui",
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "title": "Candy Button"
}