QR Code

A QR code rendered as crisp, dependency-free SVG. The matrix is generated in-house, byte mode, ECC levels L through H, with automatic version and mask selection, and paints in the current text color.

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Activate your Pro license (once per machine)
npx koalaui-cli@latest login <key>

# Add this component (its dependencies come along)
npx koalaui-cli@latest add qr-code

Usage#

This example is part of Koala UI Pro

The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.

Get the code

Have a license? Unlock it here

Error correction#

level sets how much of the code can be damaged or covered while still scanning. Higher levels add redundancy, so the same data needs a denser grid. Use H when a logo sits on top or the code is printed small; M (the default) is right for screens.

L · ~7%

M · ~15%

Q · ~25%

H · ~30%

Sizing#

size sets the rendered width and height in pixels. The SVG is resolution-independent, so it stays sharp at any size; drive it per breakpoint with className if you need a responsive code.

Quiet zone#

margin is the light border around the code, measured in modules. The spec asks for at least 4 for reliable scanning; drop it lower only when the surrounding surface already supplies light padding (as the panel below does).

Color & theming#

Modules paint in currentColor over the component's background, so a code re-themes by default. You can recolor it with any text token, but keep the contrast high: scanners need the modules clearly darker (or clearly lighter) than the quiet zone. The brand-tinted example below still reads because text-brand stays well clear of the card background.

Module shape#

moduleRadius rounds each module, as a fraction of its size: 0 (the default) for sharp squares, 0.3 for a soft look, up to 0.5 for full dots. Keep it modest, heavy rounding eats into the modules and can hurt scanning.

0 · default

0.3 · soft

0.5 · dots

In a dialog#

A QR code pairs naturally with a verification flow. See the two-factor (2FA) Dialog for a full example: a QRCode on a nested panel above an OTP Input.

API reference#

QRCode

An <svg role="img"> whose modules paint in currentColor over a bg-background quiet zone. Forwards all native <svg> props except children; accepts className, merged last.

Prop	Type	Default	Description
value*	string	-	The text to encode (UTF-8 byte mode): a URL, plain text or an `otpauth://` URI. Throws if it exceeds QR version 40.
level	"L" \| "M" \| "Q" \| "H"	"M"	Error correction: `L` ~7%, `M` ~15%, `Q` ~25%, `H` ~30%. Higher survives more occlusion at the cost of a denser code.
size	number	160	Rendered width and height in pixels. Override per breakpoint with `className`.
margin	number	4	Quiet-zone width in modules. The spec asks for at least 4; lower it only when the surface already gives light padding.
moduleRadius	number	0	Corner rounding of each module as a fraction of a module, clamped to 0 (sharp squares) through 0.5 (dots).
title	string	"QR code"	Accessible name, set as `aria-label` and the SVG `<title>` tooltip.

FAQ#

No. The encoder is hand-rolled and dependency-free, matching the rest of Koala's hard primitives like Chart, Calendar, and the Command palette. It supports byte mode (UTF-8), which covers URLs, plain text, and otpauth:// URIs, and selects the smallest version and the lowest-penalty mask automatically.