Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Qr code

A QR code drawn as one crisp SVG path, encoded in the file with no dependency and no request. It stays dark on a white plate in both themes, keeps the quiet zone scanners need, and says what it is for to assistive technology.

Pro
pnpm dlx shadcn@latest add @caliper/qr-code

Pay INV-2041

Scan with a phone camera, or copy the link.

€12,480.00 · due 4 Nov

Installs components/ui/qr-code.tsxDepends on none beyond ReactMotion none in component source

When to use

Use it for

  • Handing a link from screen to phone: sign-in on another device, an invoice, a ticket, a download.
  • Printed or exported pages where a link cannot be clicked.

Skip it when

  • As the only way to reach something; always show the link or a copy button beside it.
  • Payloads longer than a short link; version 10 holds about 213 bytes at level M.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Too long says so
Text beyond version 10 shows a short notice in the code's place instead of a code that would not scan.

Styling

Never inverted
Many phone scanners cannot read light modules on dark, so the plate is white in dark mode too.

Usage

Name the purpose
label is what a screen reader hears ("Scan to pay INV-2041"); without it the encoded text is read.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/qr-code

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source. It is built from QrCode and encodeQr.

example.tsx
import { QrCode, encodeQr } from "@/components/ui/qr-code"

The worked example comes with Pro

The 36-line example behind the preview opens here, ready to copy.

  • 576 Pro parts, blocks and page templates, all with source
  • $199 once, with a year of updates. What you have stays yours
  • A full refund within 14 days if it is not for you
Checking your licence…

API reference

QrCode

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription
value *string—The text or link to encode.
labelstring—What the code is for, read to assistive technology, e.g. "Scan to open the invoice". Defaults to the value.
levelQrLevel"M"Error correction: L 7%, M 15%, Q 25%, H 30% of the code can be damaged and still read.
sizenumber160Drawn width and height in pixels. The code is always drawn crisp, at whole modules.

encodeQr

component

No props of its own; it accepts the native props of its root element.

Accessibility

It exposes note and img semantics, with aria-label kept in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.

All Table examples