{
  "name": "qr-code-formats-demo",
  "type": "registry:example",
  "registryDependencies": [
    "button",
    "qr-code"
  ],
  "files": [
    {
      "path": "examples/qr-code-formats-demo.tsx",
      "type": "registry:example",
      "content": "import { Button } from \"@/registry/bases/radix/ui/button\";\nimport {\n  QRCode,\n  QRCodeCanvas,\n  QRCodeDownload,\n  QRCodeImage,\n  QRCodeSvg,\n} from \"@/registry/bases/radix/ui/qr-code\";\n\nconst value = \"https://diceui.com\";\n\nexport default function QRCodeFormatsDemo() {\n  return (\n    <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-3\">\n      <div className=\"flex flex-col items-center gap-2\">\n        <QRCode value={value} size={120}>\n          <QRCodeCanvas />\n          <QRCodeDownload format=\"png\" filename=\"qr-canvas\" asChild>\n            <Button size=\"sm\">Download PNG</Button>\n          </QRCodeDownload>\n        </QRCode>\n        <p className=\"text-sm text-muted-foreground\">Rendered as canvas</p>\n      </div>\n\n      <div className=\"flex flex-col items-center gap-2\">\n        <QRCode value={value} size={120}>\n          <QRCodeSvg />\n          <QRCodeDownload format=\"svg\" filename=\"qr-svg\" asChild>\n            <Button size=\"sm\">Download SVG</Button>\n          </QRCodeDownload>\n        </QRCode>\n        <p className=\"text-sm text-muted-foreground\">Rendered as SVG</p>\n      </div>\n\n      <div className=\"flex flex-col items-center gap-2\">\n        <QRCode value={value} size={120}>\n          <QRCodeImage alt=\"QR Code\" />\n          <QRCodeDownload format=\"png\" filename=\"qr-image\" asChild>\n            <Button size=\"sm\">Download PNG</Button>\n          </QRCodeDownload>\n        </QRCode>\n        <p className=\"text-sm text-muted-foreground\">Rendered as image</p>\n      </div>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}