QR Code

v0.1.1
Draft

A QR code drawn as inline SVG for any value: one white plate and one path of black modules, rendered synchronously so it works in server components and prints crisply at any size.

pnpm add @behivetech/atoms.qr-code

This is the snapshot of v0.1.1, the current version, as recorded on 2026-11-10. The live page runs its examples →

Examples of v0.1.1 are shown as code; only the latest version runs live. Open the live examples →

A code at the default size. It is black on white in every theme so it always scans.

Basic Qr Code
1const VALUE = "https://the-behive.com/q/K7M2QX9P";
2

3const LABEL = "the-behive.com/q/K7M2QX9P";
4

5const BasicQrCode = () => <QrCode value={VALUE} label={LABEL} />;
6

7render(<BasicQrCode />);

The smallest size, 6rem (1 in), for tight spots. Below this the code is raised to 6rem.

Small Qr Code
1const VALUE = "https://the-behive.com/q/K7M2QX9P";
2

3const LABEL = "the-behive.com/q/K7M2QX9P";
4

5const SmallQrCode = () => (
6  <QrCode value={VALUE} label={LABEL} size={6} />
7);
8

9render(<SmallQrCode />);

Higher error correction survives scuffs and stickers, at the cost of a denser code.

High Error Correction Qr Code
1const VALUE = "https://the-behive.com/q/K7M2QX9P";
2

3const LABEL = "the-behive.com/q/K7M2QX9P";
4

5const HighErrorCorrectionQrCode = () => (
6  <QrCode value={VALUE} label={LABEL} size={15} errorCorrection="H" />
7);
8

9render(<HighErrorCorrectionQrCode />);

An empty value cannot be encoded, so a dashed box of the same size stands in and keeps its label.

Invalid Qr Code
1const InvalidQrCode = () => <QrCode value="" label="Code unavailable" />;
2

3render(<InvalidQrCode />);