QR Code

Pro

Crisp QR code that stays sharp at any size and needs no extra library. It appears from the centre outward, can hold a logo in the middle, and fades the new code in when the value changes.

Preview

Installation

npx @lumioui/cli add pro/qr-code

Usage

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

Examples

Boarding pass

A boarding pass in an airline app.

Pay me

A payments app's "My code" screen.

API reference

Prop Type Default
value* string

Text to encode (UTF-8, byte mode). Max ~212 bytes.

 —
size number

Rendered edge in px. Default 160.

 160
color string

Dark-module colour. Default near-black in both themes.

 —
backgroundColor string

Quiet-zone fill. Default white in both themes; "transparent" to drop the tile.

 QR_PAPER
radius number

Corner radius of the quiet-zone tile, in px. Default 8% of size, capped at 16.

 —
quietZone number

Quiet-zone width in modules. Default 4 (spec minimum).

 4
logo React.ReactNode

Centre logo slot — avatar, brand mark, badge.

 —
logoSize number

Logo tile edge in px. Default size × 0.22.

 —
logoBackgroundColor string

Punch-out behind the logo. Defaults to the code's background.

 —
reveal boolean

Switch the code on in rings on mount and on every re-encode. Default true.

 true
onReady () => void

Fires when a (re-)encoded code has fully switched on and is ready to scan.

 —
className string —
accessibilityLabel string —