QR Code

<QRCode />

Installation

npx shadcn@latest add @dotui/qr-code

Usage

import { QRCode } from '@/components/ui/qr-code'
;<QRCode value="https://dotui.org" aria-label="dotUI website" />

Pass an aria-label describing the destination — to a screen reader, an unlabeled QR code is meaningless.

Logo

Pass children to display a logo at the center of the code. The modules behind it are excavated so it sits in clean whitespace, and the default error correction level is raised to H to compensate for the covered area.

<QRCode value="https://dotui.org" aria-label="dotUI website">
  <Logo />
</QRCode>

Error correction

QR codes embed redundancy so they scan even when partially obscured. The errorCorrection prop sets the level: L (7%), M (15%), Q (25%) or H (30%) — higher levels produce a denser code.

The code renders with the theme's foreground on the theme's background. Scanners expect dark modules on a light background; in dark themes the code is inverted, which some scanners reject. Always test scanning with your real theme, colors and logo.

Examples

API Reference