{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "qr-code",
  "title": "QRCode",
  "description": "A QR code generator component",
  "dependencies": [
    "qrcode"
  ],
  "files": [
    {
      "path": "registry/cs/ui/qr-code/qr-code.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as QRCodeLib from \"qrcode\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface QRCodeProps extends React.ComponentProps<\"div\"> {\n  value: string\n  size?: number\n  bgColor?: string\n  fgColor?: string\n}\n\nfunction QRCode({ \n  value, \n  size = 200, \n  bgColor = \"#ffffff\",\n  fgColor = \"#000000\",\n  className, \n  ...props \n}: QRCodeProps) {\n  const canvasRef = React.useRef<HTMLCanvasElement>(null)\n\n  React.useEffect(() => {\n    if (!canvasRef.current || !value) return\n\n    QRCodeLib.toCanvas(canvasRef.current, value, {\n      width: size,\n      margin: 1,\n      color: {\n        dark: fgColor,\n        light: bgColor,\n      },\n    }).catch(() => undefined)\n  }, [value, size, bgColor, fgColor])\n\n  return (\n    <div\n      data-slot=\"qr-code\"\n      className={cn(\"inline-flex items-center justify-center\", className)}\n      {...props}\n    >\n      <canvas\n        ref={canvasRef}\n        width={size}\n        height={size}\n        className=\"rounded-md\"\n      />\n    </div>\n  )\n}\n\nexport { QRCode }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}