QR Code

QR code rendered as SVG in the current text color (works with theme presets and dark mode).

Import

import { QRCode } from '@marbleui/ui'

Props

<QRCode>

Prop	Type	Default	Description
value *required	`string`	`—`
aria-label	`string`	`—`
className	`string`	`—`
ecc	`'L' \| 'M' \| 'Q' \| 'H'`	`'M'`	Error correction: higher survives more damage (and leaves room for a logo).
logo	`ReactNode`	`—`	Optional center content (logo). Use ecc="H" with it.
size	`number`	`160`
variant	`'square' \| 'dots' \| 'rounded'`	`'square'`	Module style.

Usage notes

QR code rendered as SVG in the current text colour. For a short link users can type, show it as text next to the code.

<QRCode value="https://marbleui.dev" size={160} aria-label="Scan to open Marble UI" />

value is the encoded string. size is in pixels (default 160); ecc is L, M (default), Q or H.
variant is square (default), dots or rounded. Use logo for centre content together with ecc="H" so the code stays scannable.
It renders as role="img" with a default label “QR code for {value}”. Pass aria-label to give a more useful name.
It uses currentColor; keep strong contrast with the background so it scans.

Example source · show

import { QRCode } from './qr-code'

const url = 'https://marbleui.dev/components/qr-code'

export const styles = {
  Square: () => <QRCode value={url} />,
  Rounded: () => <QRCode value={url} variant="rounded" className="text-accent-ink" />,
  'Dots + logo': () => (
    <div className="rounded-2xl border border-border bg-surface p-4">
      <QRCode value={url} variant="dots" ecc="H" logo={<span className="grid size-full place-items-center rounded-sm bg-accent text-xs font-bold text-accent-fg">UI</span>} />
    </div>
  ),
}

Source: packages/ui/src/qr-code/qr-code.tsx

Catalog