QR CodeLast updated on
Last updated on
An SVG QR code that links a printed or previewed document to a URL, with configurable size and colors.
QRCode is the one component here that reads nothing from the artifact: it
takes a URL directly and draws it as a scannable SVG, sharp at any output
scale in both the browser preview and PDF rendering.
Preview
Installation
npx shadcn@4 add @paradoc/qr-codeOr, with the Paradoc CLI, which writes the namespace into components.json for you:
npx paradoc-cli add qr-codeInstalls to components/paradoc/qr-code.tsx.
Usage
import { QRCode } from "@/components/paradoc/qr-code";<QRCode url={`https://docs.paradoc.dev/p/${String(shortProposalData.fields.proposalNumber)}`} />| Prop | Type | Default | Description |
|---|---|---|---|
| url | string | — | The URL encoded by the QR code. |
| size? | number | 128 | Width and height in pixels. |
| color? | string | "#000000" | QR module color. |
| backgroundColor? | string | "#ffffff" | Background color behind the modules. |
| label? | string | "QR code for <url>" | Accessible name for the SVG. |
| className? | string | — | Application-owned classes on the SVG. |
Composition
QRCode needs no Document above it and binds to nothing in the artifact —
its only input is the url prop, which a caller builds from whatever the
document should point to: a canonical online copy, a verification page, a
payment link. That makes it the one component here a caller can place
anywhere a plain image would go, including outside a document entirely.
It also carries no pagination unit of its own, unlike every other component
here: it is not a Keep Together. A caller who needs it to stay with the
text beside it — a masthead, a signature block — wraps it in one, the same
way any other markup would.
An empty url throws EmptyQRCodeUrlError instead of drawing a code with
nothing encoded in it.
Variants
Custom colors
color and backgroundColor replace the default black-on-white modules.
Larger size
size replaces the default 128px width and height of the code.
Custom label
label overrides the default QR code for <url> accessible name.