# QR Code

Dependency-free QR codes with an optional logo overlay.

Group: Data

## Import

```tsx
import { QrCode } from "@indoku/ui"
```

## Examples

### Basic usage

```tsx
function QrCodeDemo() {
  return (
    <HStack gap="4" align="start">
      <QrCode.Root value="https://indoku.id" boxSize="36" />
      <QrCode.Root value="https://indoku.id/u/demo" level="H" boxSize="36">
        <QrCode.Frame />
        <QrCode.Overlay>
          <Text fontWeight="bold">I</Text>
        </QrCode.Overlay>
      </QrCode.Root>
    </HStack>
  )
}
```

## Props

### Root

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` * | `string` |  |  |
| `level` | `QrLevel` | `M` | Error-correction level. Raised automatically while the data still fits (see `noBoost`). |
| `noBoost` | `boolean` |  | Disable the automatic level upgrade. |
| `quietZone` | `number` | `2` | White margin in modules (spec says 4, 2 is usually still readable). |
| `fill` | `string` | `near black` | Dark module color. |
| `background` | `string` | `white` | Background color. A QR code needs contrast, so it does not follow dark mode. |
| `label` | `string` | `QR code` | `aria-label` of the SVG. |
| `children` | `React.ReactNode` |  |  |

`*` = required. Style props and HTML attributes are accepted too.