# QR Code

An SVG QR code that links a printed or previewed document to a URL, with configurable size and colors.

Canonical URL: https://docs.asterdoc.com/components/qr-code/

`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


```tsx
import { QRCode } from "@/components/asterdoc/qr-code";
import { shortProposalData } from "@/examples/proposal-data";

export function QRCodeDemo() {
  return (
    <QRCode url={`https://docs.asterdoc.com/p/${String(shortProposalData.fields.proposalNumber)}`} />
  );
}
```


## Installation


```bash
npx shadcn@4 add @asterdoc/qr-code
```


```bash
asterdoc add qr-code
```


Installs to components/asterdoc/qr-code.tsx.


## Usage


```tsx
import { QRCode } from "@/components/asterdoc/qr-code";

<QRCode url={`https://docs.asterdoc.com/p/${String(shortProposalData.fields.proposalNumber)}`} />
```

| Prop | Type | Optional | Default | Description |
| --- | --- | --- | --- | --- |
| `url` | `string` | No |  | The URL encoded by the QR code. |
| `size` | `number` | Yes | 128 | Width and height in pixels. |
| `color` | `string` | Yes | "#000000" | QR module color. |
| `backgroundColor` | `string` | Yes | "#ffffff" | Background color behind the modules. |
| `label` | `string` | Yes | "QR code for <url>" | Accessible name for the SVG. |
| `className` | `string` | Yes |  | 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.


```tsx
import { QRCode } from "@/components/asterdoc/qr-code";
import { shortProposalData } from "@/examples/proposal-data";

export function QRCodeVariantCustomColors() {
  return (
    <QRCode
      url={`https://docs.asterdoc.com/p/${String(shortProposalData.fields.proposalNumber)}`}
      color="#1d4ed8"
      backgroundColor="#eff6ff"
    />
  );
}
```


### Larger size

`size` replaces the default 128px width and height of the code.


```tsx
import { QRCode } from "@/components/asterdoc/qr-code";
import { shortProposalData } from "@/examples/proposal-data";

export function QRCodeVariantLargerSize() {
  return (
    <QRCode
      url={`https://docs.asterdoc.com/p/${String(shortProposalData.fields.proposalNumber)}`}
      size={200}
    />
  );
}
```


### Custom label

`label` overrides the default `QR code for <url>` accessible name.


```tsx
import { QRCode } from "@/components/asterdoc/qr-code";
import { shortProposalData } from "@/examples/proposal-data";

export function QRCodeVariantCustomLabel() {
  return (
    <QRCode
      url={`https://docs.asterdoc.com/p/${String(shortProposalData.fields.proposalNumber)}`}
      label="Scan for the online copy of this proposal"
    />
  );
}
```