feat(qr-code): add overlay primitive (#173)

* feat(qr-code): add overlay component for logos and icons

- Add QRCodeOverlay component for placing content in center of QR codes
- Works with all rendering methods (Image, Canvas, SVG)
- Defaults to 20% of QR code size for optimal scannability
- Add demo showing overlay with different rendering methods
- Add documentation and API reference
- Recommend level='H' for best error correction with overlays

* feat: update demos

* feat: add qr-code-skeleton

* feat: update qr-code

Author: sadmann7

docs/__registry__/index.tsx

@@ -1719,6 +1719,20 @@ export const Index: Record<string, any> = {
       source: "",
       chunks: []
     },
+    "qr-code-overlay-demo": {
+      name: "qr-code-overlay-demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: ["qr-code"],
+      files: [{
+        path: "registry/default/examples/qr-code-overlay-demo.tsx",
+        type: "registry:example",
+        target: ""
+      }],
+      component: React.lazy(() => import("@/registry/default/examples/qr-code-overlay-demo.tsx")),
+      source: "",
+      chunks: []
+    },
     "rating-demo": {
       name: "rating-demo",
       description: "",

docs/app/(lobby)/pg/page.tsx

@@ -1,18 +1,20 @@
 import { Demo } from "@/components/demo";
 import { Shell } from "@/components/shell";
 import ColorPickerDemo from "@/registry/default/examples/color-picker-demo";
+import QRCodeDemo from "@/registry/default/examples/qr-code-demo";
+import QRCodeFormatsDemo from "@/registry/default/examples/qr-code-formats-demo";
+import QRCodeOverlayDemo from "@/registry/default/examples/qr-code-overlay-demo";
 import ScrollSpyControlledDemo from "@/registry/default/examples/scroll-spy-controlled-demo";
 import ScrollSpyDemo from "@/registry/default/examples/scroll-spy-demo";
 import ScrollSpyVerticalDemo from "@/registry/default/examples/scroll-spy-vertical-demo";
-import StackDemo from "@/registry/default/examples/stack-demo";
-import StackSideDemo from "@/registry/default/examples/stack-side-demo";
 
 export default function PlaygroundPage() {
   return (
     <Shell>
       <Demo>
-        <StackDemo />
-        <StackSideDemo />
+        <QRCodeDemo />
+        <QRCodeFormatsDemo />
+        <QRCodeOverlayDemo />
         <ScrollSpyDemo />
         <ScrollSpyControlledDemo />
         <ScrollSpyVerticalDemo />

docs/content/docs/components/qr-code.mdx

@@ -50,9 +50,13 @@ import { QRCode } from "@/components/ui/qr-code";
 return (
   <QRCode>
     <QRCode.Canvas />
+    <QRCode.Overlay />
+    <QRCode.Skeleton />
+    <QRCode.Download />
   </QRCode>
 )
 ```
+Swap `Canvas` with `Svg` or `Image` to render the qr code in svg and image formats respectively.
 
 ## Examples
 
@@ -68,6 +72,12 @@ Customize colors, size, and error correction levels.
 
 <ComponentTabs name="qr-code-customization-demo" />
 
+### Overlay
+
+Add logos, icons, or custom elements to the center of QR codes.
+
+<ComponentTabs name="qr-code-overlay-demo" />
+
 ## API Reference
 
 ### Root
@@ -116,6 +126,24 @@ Renders the QR code as an SVG element.
   name="SvgProps"
 />
 
+### Overlay
+
+Overlays content (like logos or icons) in the center of the QR code.
+
+<AutoTypeTable
+  path="./types/docs/qr-code.ts"
+  name="OverlayProps"
+/>
+
+### Skeleton
+
+Displays a loading placeholder while the QR code is being generated. Automatically hides once the QR code is ready.
+
+<AutoTypeTable
+  path="./types/docs/qr-code.ts"
+  name="SkeletonProps"
+/>
+
 ### Download
 
 A button component for downloading the QR code.
@@ -161,3 +189,4 @@ Higher error correction levels result in denser QR codes but provide better resi
 - The download functionality works in all modern browsers
 - QR codes are generated client-side for privacy and performance
 - Child elements are automatically constrained by the `--qr-code-size` CSS variable to prevent layout issues
+- When using the Overlay component, set `level="H"` (High error correction) to ensure the QR code remains scannable with up to 30% coverage

docs/public/r/styles/default/qr-code-customization-demo.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "examples/qr-code-customization-demo.tsx",
-      "content": "import { QRCode, QRCodeCanvas } from \"@/registry/default/ui/qr-code\";\n\nexport default function QRCodeCustomizationDemo() {\n  return (\n    <div className=\"grid grid-cols-1 gap-6 sm:grid-cols-2\">\n      <div className=\"flex flex-col items-center gap-2\">\n        <QRCode\n          value=\"https://diceui.com\"\n          size={150}\n          foregroundColor=\"#3b82f6\"\n          backgroundColor=\"#f1f5f9\"\n        >\n          <QRCodeCanvas />\n        </QRCode>\n        <p className=\"text-muted-foreground text-sm\">Custom Colors</p>\n      </div>\n\n      <div className=\"flex flex-col items-center gap-2\">\n        <QRCode\n          value=\"https://diceui.com\"\n          size={150}\n          level=\"H\"\n          foregroundColor=\"#dc2626\"\n        >\n          <QRCodeCanvas />\n        </QRCode>\n        <p className=\"text-muted-foreground text-sm\">High Error Correction</p>\n      </div>\n    </div>\n  );\n}\n",
+      "content": "import {\n  QRCode,\n  QRCodeCanvas,\n  QRCodeSkeleton,\n} from \"@/registry/default/ui/qr-code\";\n\nexport default function QRCodeCustomizationDemo() {\n  return (\n    <div className=\"grid grid-cols-1 gap-6 sm:grid-cols-2\">\n      <div className=\"flex flex-col items-center gap-2\">\n        <QRCode\n          value=\"https://diceui.com\"\n          size={150}\n          foregroundColor=\"#3b82f6\"\n          backgroundColor=\"#f1f5f9\"\n        >\n          <QRCodeCanvas />\n          <QRCodeSkeleton />\n        </QRCode>\n        <p className=\"text-muted-foreground text-sm\">Custom Colors</p>\n      </div>\n\n      <div className=\"flex flex-col items-center gap-2\">\n        <QRCode\n          value=\"https://diceui.com\"\n          size={150}\n          level=\"H\"\n          foregroundColor=\"#dc2626\"\n        >\n          <QRCodeCanvas />\n          <QRCodeSkeleton />\n        </QRCode>\n        <p className=\"text-muted-foreground text-sm\">High Error Correction</p>\n      </div>\n    </div>\n  );\n}\n",
       "type": "registry:example",
       "target": ""
     }

docs/public/r/styles/default/qr-code-demo.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "examples/qr-code-demo.tsx",
-      "content": "import { QRCode, QRCodeCanvas } from \"@/registry/default/ui/qr-code\";\n\nexport default function QRCodeDemo() {\n  return (\n    <QRCode value=\"https://diceui.com\" size={200}>\n      <QRCodeCanvas />\n    </QRCode>\n  );\n}\n",
+      "content": "import {\n  QRCode,\n  QRCodeCanvas,\n  QRCodeSkeleton,\n} from \"@/registry/default/ui/qr-code\";\n\nexport default function QRCodeDemo() {\n  return (\n    <QRCode value=\"https://diceui.com\" size={200}>\n      <QRCodeSkeleton />\n      <QRCodeCanvas />\n    </QRCode>\n  );\n}\n",
       "type": "registry:example",
       "target": ""
     }

docs/public/r/styles/default/qr-code-overlay-demo.json

@@ -0,0 +1,18 @@
+{
+  "name": "qr-code-overlay-demo",
+  "type": "registry:example",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "qr-code"
+  ],
+  "files": [
+    {
+      "path": "examples/qr-code-overlay-demo.tsx",
+      "content": "import { Dice4 } from \"lucide-react\";\nimport {\n  QRCode,\n  QRCodeCanvas,\n  QRCodeImage,\n  QRCodeOverlay,\n  QRCodeSkeleton,\n  QRCodeSvg,\n} from \"@/registry/default/ui/qr-code\";\n\nexport default function QRCodeOverlayDemo() {\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\n          value=\"https://diceui.com\"\n          size={120}\n          level=\"H\"\n          className=\"gap-4\"\n        >\n          <QRCodeSkeleton />\n          <QRCodeCanvas />\n          <QRCodeOverlay className=\"rounded-full border-2 border-white p-2\">\n            <Dice4 className=\"size-6\" />\n          </QRCodeOverlay>\n        </QRCode>\n        <p className=\"text-center text-muted-foreground text-sm\">\n          Canvas with Logo\n        </p>\n      </div>\n\n      <div className=\"flex flex-col items-center gap-2\">\n        <QRCode\n          value=\"https://diceui.com\"\n          size={120}\n          level=\"H\"\n          className=\"gap-4\"\n        >\n          <QRCodeSkeleton />\n          <QRCodeSvg />\n          <QRCodeOverlay className=\"rounded-full border-2 border-white bg-linear-to-br from-accent to-muted p-2\">\n            <Dice4 className=\"size-6\" />\n          </QRCodeOverlay>\n        </QRCode>\n        <p className=\"text-center text-muted-foreground text-sm\">\n          SVG with Logo\n        </p>\n      </div>\n\n      <div className=\"flex flex-col items-center gap-2\">\n        <QRCode\n          value=\"https://diceui.com\"\n          size={120}\n          level=\"H\"\n          className=\"gap-4\"\n        >\n          <QRCodeSkeleton />\n          <QRCodeImage />\n          <QRCodeOverlay className=\"rounded-full border-2 border-white p-1.5\">\n            <Dice4 className=\"size-6\" />\n          </QRCodeOverlay>\n        </QRCode>\n        <p className=\"text-center text-muted-foreground text-sm\">\n          Image with Logo\n        </p>\n      </div>\n    </div>\n  );\n}\n",
+      "type": "registry:example",
+      "target": ""
+    }
+  ]
+}