## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @dotui/qr-code ``` ```bash pnpm dlx shadcn@latest add @dotui/qr-code ``` ```bash yarn dlx shadcn@latest add @dotui/qr-code ``` ```bash bun x shadcn@latest add @dotui/qr-code ``` ## Usage [#usage] ```tsx import { QRCode } from '@/components/ui/qr-code' ; ``` Pass an `aria-label` describing the destination — to a screen reader, an unlabeled QR code is meaningless. ## Logo [#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. ```tsx ``` ## Error correction [#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 [#examples] ## API Reference [#api-reference]