QR Code

Client-rendered QR code drawn as inline SVG, with square or rounded modules. The encoder loads lazily on mount, so nothing ships to the server render. The paired useQRCode composable downloads the same code as SVG or an image.

Default

Pass any string to url. The code fills its container, so give it a width. Click it to switch between square and rounded modules, a choice that persists and applies to every QR code in the app.

Pinned variant

Set variant to lock the module shape. A pinned code ignores the shared style and drops the click-to-toggle affordance.

Square

Rounded

Colors

fgColor and bgColor accept any CSS color, including custom properties. The background is transparent by default so the code inherits whatever surface it sits on.

Error correction

Higher levels survive more damage at the cost of denser modules. Use Q or H when the code is printed, overlaid, or scanned in poor light.

Level L

Level M

Level Q

Level H

Download

useQRCode regenerates the code off-screen at a larger size and saves it. downloadSVG keeps it vector, downloadJPG rasterizes it on a canvas. Both resolve CSS variables to real colors first, so the saved file never renders blank.

API Reference

QRCode

Prop	Type	Default	Description
`url`	`string`	—	Required. The text encoded in the code: a URL, a token, or any string.
`size`	`number`	`268`	SVG viewBox size in px. The rendered element still fills its container; this sets the drawing precision.
`margin`	`number`	`2`	Quiet zone around the code, measured in modules.
`fgColor`	`string`	`"var(--foreground)"`	Module color. Any CSS color value.
`bgColor`	`string`	`"transparent"`	Background fill behind the modules.
`errorCorrectionLevel`	`"L" \| "M" \| "Q" \| "H"`	`"M"`	Recovery capacity: L 7%, M 15%, Q 25%, H 30%.
`variant`	`"square" \| "rounded"`	`undefined`	Pin the module shape. Unset, the code follows the shared persisted style and stays clickable.
`toggleable`	`boolean`	`true`	Allow clicking the code to switch styles. Ignored when variant is pinned.
`animate`	`boolean`	`true`	Cross-fade from the skeleton once the code is drawn. Turn it off inside a dialog, where the panel's own entrance already covers the same frames.
`class`	`string \| object \| array`	`undefined`	Extra classes on the wrapper, which is aspect-square and full-width by default.

useQRCode

Prop	Type	Default	Description
`createQRData`	`(value, level?) => Promise<QRCode \| null>`	—	Encodes a string into the raw module matrix. Returns null when encoding fails.
`generateSvgString`	`(value, options?) => Promise<string>`	—	Returns a standalone SVG string, useful for PDFs, emails, or server-bound payloads.
`downloadSVG`	`(value, filename, options?) => Promise<void>`	—	Saves a vector file. Defaults to size 512 and margin 2.
`downloadJPG`	`(value, filename, options?) => Promise<void>`	—	Rasterizes on a canvas and saves an image. Defaults to size 1080.

useQRCodeStyle

Prop	Type	Default	Description
`qrStyle`	`Ref<"square" \| "rounded">`	`"square"`	The shared module style, persisted in local storage and read by every QRCode instance.
`toggleQrStyle`	`() => void`	—	Flips the shared style. Wire it to your own control when the code itself is not clickable.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Tab`	Focuses the code when it is clickable (variant unset and toggleable on).
`Enter`	Switches the module style while the code is focused.
`Space`	Switches the module style while the code is focused.

A QR code carries no text alternative on its own. Print the encoded value, or a plain link to it, next to the code so it stays usable without a camera.
Set toggleable to false when the code sits inside a link, a card, or any other clickable surface, so a scan attempt is not read as a style change.
Keep enough contrast between fgColor and the surface behind it. Scanners need roughly the same contrast people do.

Progress Questionnaire