# QR Code

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.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/qr-code
```

## Import

```tsx
import { QRCode } from "@/components/ui/qr-code/qr-code";
```

## Variants

- `boarding-pass` — Boarding pass: `npx @lumioui/cli add pro/qr-code-boarding-pass`
- `pay` — Pay me: `npx @lumioui/cli add pro/qr-code-pay`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `value` | `string` | Text to encode (UTF-8, byte mode). Max ~212 bytes. |
| `size?` | `number` | Rendered edge in px. Default 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. |
| `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). |
| `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. |
| `onReady?` | `() => void` | Fires when a (re-)encoded code has fully switched on and is ready to scan. |
| `className?` | `string` | — |
| `accessibilityLabel?` | `string` | — |

Source: https://lumioui.com/components/qr-code