{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "neon-gradient-card",
  "type": "registry:ui",
  "title": "Neon Gradient Card",
  "description": "A beautiful neon card effect",
  "files": [
    {
      "path": "registry/magicui/neon-gradient-card.tsx",
      "content": "\"use client\"\n\nimport {\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n} from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface NeonColorsProps {\n  firstColor: string\n  secondColor: string\n}\n\ninterface NeonGradientCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * @default <div />\n   * @type ReactElement\n   * @description\n   * The component to be rendered as the card\n   * */\n  as?: ReactElement\n  /**\n   * @default \"\"\n   * @type string\n   * @description\n   * The className of the card\n   */\n  className?: string\n\n  /**\n   * @default \"\"\n   * @type ReactNode\n   * @description\n   * The children of the card\n   * */\n  children?: ReactNode\n\n  /**\n   * @default 5\n   * @type number\n   * @description\n   * The size of the border in pixels\n   * */\n  borderSize?: number\n\n  /**\n   * @default 20\n   * @type number\n   * @description\n   * The size of the radius in pixels\n   * */\n  borderRadius?: number\n\n  /**\n   * @default \"{ firstColor: '#ff00aa', secondColor: '#00FFF1' }\"\n   * @type string\n   * @description\n   * The colors of the neon gradient\n   * */\n  neonColors?: NeonColorsProps\n}\n\nexport const NeonGradientCard: React.FC<NeonGradientCardProps> = ({\n  className,\n  children,\n  borderSize = 2,\n  borderRadius = 20,\n  neonColors = {\n    firstColor: \"#ff00aa\",\n    secondColor: \"#00FFF1\",\n  },\n  ...props\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })\n\n  useEffect(() => {\n    const updateDimensions = () => {\n      if (containerRef.current) {\n        const { offsetWidth, offsetHeight } = containerRef.current\n        setDimensions({ width: offsetWidth, height: offsetHeight })\n      }\n    }\n\n    updateDimensions()\n    window.addEventListener(\"resize\", updateDimensions)\n\n    return () => {\n      window.removeEventListener(\"resize\", updateDimensions)\n    }\n  }, [])\n\n  useEffect(() => {\n    if (containerRef.current) {\n      const { offsetWidth, offsetHeight } = containerRef.current\n      setDimensions({ width: offsetWidth, height: offsetHeight })\n    }\n  }, [children])\n\n  return (\n    <div\n      ref={containerRef}\n      style={\n        {\n          \"--border-size\": `${borderSize}px`,\n          \"--border-radius\": `${borderRadius}px`,\n          \"--neon-first-color\": neonColors.firstColor,\n          \"--neon-second-color\": neonColors.secondColor,\n          \"--card-width\": `${dimensions.width}px`,\n          \"--card-height\": `${dimensions.height}px`,\n          \"--card-content-radius\": `${borderRadius - borderSize}px`,\n          \"--pseudo-element-background-image\": `linear-gradient(0deg, ${neonColors.firstColor}, ${neonColors.secondColor})`,\n          \"--pseudo-element-width\": `${dimensions.width + borderSize * 2}px`,\n          \"--pseudo-element-height\": `${dimensions.height + borderSize * 2}px`,\n          \"--after-blur\": `${dimensions.width / 3}px`,\n        } as CSSProperties\n      }\n      className={cn(\n        \"relative z-10 size-full rounded-(--border-radius)\",\n        className\n      )}\n      {...props}\n    >\n      <div\n        className={cn(\n          \"relative size-full min-h-[inherit] rounded-(--card-content-radius) bg-gray-100 p-6\",\n          \"before:absolute before:-top-(--border-size) before:-left-(--border-size) before:-z-10 before:block\",\n          \"before:h-(--pseudo-element-height) before:w-(--pseudo-element-width) before:rounded-(--border-radius) before:content-['']\",\n          \"before:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] before:bg-size-[100%_200%]\",\n          \"before:animate-background-position-spin\",\n          \"after:absolute after:-top-(--border-size) after:-left-(--border-size) after:-z-10 after:block\",\n          \"after:h-(--pseudo-element-height) after:w-(--pseudo-element-width) after:rounded-(--border-radius) after:blur-(--after-blur) after:content-['']\",\n          \"after:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] after:bg-size-[100%_200%] after:opacity-80\",\n          \"after:animate-background-position-spin\",\n          \"dark:bg-neutral-900\",\n          \"wrap-break-word\"\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "animate-background-position-spin": "background-position-spin 3000ms infinite alternate"
    }
  },
  "css": {
    "@keyframes background-position-spin": {
      "0%": {
        "background-position": "top center"
      },
      "100%": {
        "background-position": "bottom center"
      }
    }
  }
}