ComponentsData display

QR code

Scannable QR codes for two-factor enrolment, invite links, tickets and payment slips. Encoded in the kit (byte mode, versions 1–40, all four error-correction levels, automatic mask) with no dependency, drawn as a single SVG path, and works in server components.

ISO/IEC 18004 (QR Model 2) components/qr-code.tsx, components/_qr-core.tstheme · material · accent · density · font

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { QrCode } from "@vamos-ui/react";

<QrCode value={otpauthUri} aria-label="QR code for your authenticator app" />

Verified against a reference decoder for versions 1–40 and UTF-8 text.

The plate uses the light theme tokens (class "light"), so it is not a raw colour and still follows the light palette.

Examples

Two-factor enrolment (auth)

An otpauth:// URI with the manual key beside it for people who can't scan.

Scan with your authenticator app

Can't scan? Enter this key instead:

JBSW Y3DP EHPK 3PXP

6-digit code

Error correction and size

Higher levels survive more damage but need more modules; the version grows to fit.

L · 7% recovery

M · 15% recovery

Q · 25% recovery

H · 30% recovery

Centre mark (tickets)

children sits in the middle; error correction switches to H automatically.

Ceramics workshop

Thu 4 Dec · 14:00

Studio A · Row C, seat 14

KL-WS-2026-1204

Without the plate

plate={false} draws in the current text colour. Keep strong contrast — some scanners reject light-on-dark codes.

API

QrCode

Prop	Type	Default
`value` Text to encode — URL, otpauth:// URI, Wi-Fi string. UTF-8, byte mode.	`string`	`—`
`aria-label` Required. Say what scanning does, not "QR code".	`string`	`—`
`errorCorrection` Recovery capacity: 7 / 15 / 25 / 30%.	`"L" \| "M" \| "Q" \| "H"`	`"M" ("H" with children)`
`size` Rendered width (px or CSS length). Height follows.	`number \| string`	`176`
`margin` Quiet zone in modules.	`number`	`2 on the plate, 4 without`
`plate` Light plate that stays light in dark mode so the code always scans dark-on-light.	`boolean`	`true`
`fallback` Shown when the value exceeds version 40.	`ReactNode`	`"Too long for a QR code"`
`children` Centre mark (icon, logo). Keep it under ~20% of the width.	`ReactNode`	`—`

encodeQr(text, options?)

Prop	Type	Default
`options.errorCorrection` Level.	`"L" \| "M" \| "Q" \| "H"`	`"M"`
`options.minVersion / mask` Force a minimum version or a mask (0–7).	`number`	`—`
`returns` The module matrix — draw it yourself (canvas, print). qrPath(matrix, margin) gives the SVG path.	`{ size, version, mask, errorCorrection, modules: boolean[][] }`	`—`

Progress

Radio Group