QR Code

Installation#

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

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

Usage#

import { QRCode } from "@/components/ui/qr-code"

export function Example() {
  return <QRCode value="https://koalaui.com" />
}

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.

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.

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#

All other native svg props are forwarded to the root element.

FAQ#