QR Code
Client-side QR code as SVG, using theme foreground/background for contrast in light and dark mode.
<div className="size-48 rounded-lg border border-border-default bg-canvas p-2"> <QRCode size={192} value="https://revaos.com" /></div>Usage
import { QRCode } from "@reva/ui";Give the wrapper an explicit size (e.g. size-48 or h-48 w-48); QRCode fills the container (size-full) and generates an SVG matching the size prop (pixel width of the QR modules).
Examples
Default
Encode a URL or any string (e.g. otpauth:// for authenticator apps).
<div className="size-48"> <QRCode size={192} value="https://revaos.com" /></div>Error correction
Use robustness (L | M | Q | H) for higher error correction when overlaying a logo or for damaged print.
<div className="size-48"> <QRCode robustness="H" size={192} value="https://revaos.com" /></div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | string | — | String to encode (use data or value). |
value | string | — | Alias for data. |
size | number | 200 | Pixel width/height of the generated SVG (square). |
foreground | string | — | Override dark modules; defaults to --foreground from CSS. |
background | string | — | Override light modules; defaults to --background from CSS. |
robustness | "L" | "M" | "Q" | "H" | "M" | QR error correction level. |
| … | — | — | Other div props (className, aria-*, etc.). |
Implementation uses the qrcode package on the client; colours are derived from culori so OKLCH theme tokens convert reliably.