A real QR code encoder with a generator panel: pick where the code will be printed and it appends a source parameter to your link so scans can be attributed, with a live preview, Download SVG and Copy link. Also exports QrCode and encodeQr.
npx shadcn@latest add https://hyperblur.dev/r/qr-generator.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/qr-generator.tsx.
import { QrGenerator } from "@/components/hyperblur/qr-generator"
<QrGenerator baseUrl="https://example.com/menu" defaultValue="table" defaultTableNumber={12} level="Q" />| Prop | Type | Default | Description |
|---|---|---|---|
| baseUrl | string | "https://cornerkitchen.example/menu" | Link encoded in the code. The source parameter is added to it, keeping any existing query and hash. |
| placements | { id: string; label: string; source: string; numbered?: boolean }[] | Table, Bio link, Delivery bag, Flyer | Choices of the placement picker. A numbered placement shows a number input and produces source-number, for example table-5. |
| value | string | Controlled placement id. | |
| defaultValue | string | Initial placement id when uncontrolled. Defaults to the first placement. | |
| onChange | (placementId: string) => void | Called when a placement is picked. | |
| tableNumber | number | Controlled number for numbered placements. | |
| defaultTableNumber | number | 5 | Initial number when uncontrolled. |
| onTableNumberChange | (n: number) => void | Called when the number changes. | |
| sourceParam | string | "src" | Name of the query parameter, giving ?src=table-5, ?src=bio, ?src=bag. |
| level | "L" | "M" | "Q" | "H" | "M" | Error correction level. With a logo the code uses at least Q. |
| fg | string | "#0a0a0a" | Module color. |
| bg | string | "#ffffff" | Background color of the code. |
| margin | number | 1 | Quiet zone around the code, in modules. |
| rounded | boolean | true | Rounded modules and finder eyes instead of square ones. |
| logo | React.ReactNode | Content drawn in a cleared square in the middle of the code. | |
| fileName | string | "menu-qr" | Prefix of the downloaded SVG file name. |
| appearance | "dark" | "light" | "dark" | Color scheme of the panel. |
| accent | string | "#2f7bff" | Selected placement, focus rings and the source part of the link. |
| labels | Partial<{ heading; placement; tableNumber; link; download; copy; copied; caption; tableCaption }> | { heading: "Menu QR code", download: "Download SVG", copy: "Copy link", tableCaption: "Table {n} · scan to order", ... } | Every visible string. {n} is the table number. |
| onUrlChange | (url: string) => void | Called with the final tracked link whenever it changes. | |
| className | string | Extra classes on the root element. | |
| style | React.CSSProperties | Inline styles on the root element. |