# QR Code

> Source: https://design.nanatec.co.ke/components/qr-code/
> Renders a QR code as crisp, scalable SVG. Encodes any text (byte mode, UTF-8) with a self-contained generator — no runtime dependencies. Choose a module style with `variant`, theme it with CSS custom properties, and drop a logo into the center via the default slot.

Renders a QR code as crisp, scalable SVG. Encodes any text (byte mode, UTF-8) with a self-contained generator — no runtime dependencies. Choose a module style with `variant`, theme it with CSS custom properties, and drop a logo into the center via the default slot.

## Preview

```html
<nana-qr-code value="https://design.nanatec.co.ke" style="--nana-qr-foreground:#0d1117;--nana-qr-background:#ffffff"></nana-qr-code>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/qr-code";
```

## Basic usage

```html
<nana-qr-code value="https://design.nanatec.co.ke"></nana-qr-code>
```

## Module styles

The `variant` attribute changes how modules are drawn — `square` (default),
`rounded`, or `dots`. (The demos below set explicit colors so they stay crisp
in both light and dark; by default the module color follows your theme.)

```html
<nana-qr-code value="https://nanatec.co.ke" variant="square" style="--nana-qr-foreground:#0d1117;--nana-qr-background:#ffffff"></nana-qr-code>
<nana-qr-code value="https://nanatec.co.ke" variant="rounded" style="--nana-qr-foreground:#0d1117;--nana-qr-background:#ffffff"></nana-qr-code>
<nana-qr-code value="https://nanatec.co.ke" variant="dots" style="--nana-qr-foreground:#0d1117;--nana-qr-background:#ffffff"></nana-qr-code>
```

## Theming

Override the colour tokens to brand the code. Keep strong contrast between
foreground and background so it stays scannable.

```html
<nana-qr-code value="https://nanatec.co.ke" style="--nana-qr-foreground:#134e4a;--nana-qr-background:#ffffff;--nana-qr-radius:12px"></nana-qr-code>
<nana-qr-code value="https://nanatec.co.ke" style="--nana-qr-foreground:#f59e0b;--nana-qr-background:#0d1117;--nana-qr-radius:12px"></nana-qr-code>
```

## Error correction

Higher levels (`Q`, `H`) tolerate more damage or occlusion — required if you
overlay a center logo.

```html
<nana-qr-code value="https://nanatec.co.ke" error-correction="L" style="--nana-qr-foreground:#0d1117;--nana-qr-background:#ffffff"></nana-qr-code>
<nana-qr-code value="https://nanatec.co.ke" error-correction="H" style="--nana-qr-foreground:#0d1117;--nana-qr-background:#ffffff"></nana-qr-code>
```

## With a center logo

For a simple text monogram, set the **`logo`** attribute — the badge is styled
for you (defaults to the module color, white text, rounded), tunable via CSS
variables. For a custom image, slot an `<img>` instead. Always pair either with
`error-correction="H"` so the code stays scannable behind the overlay.

```html
<nana-qr-code value="https://nanatec.co.ke" logo="N" variant="rounded" error-correction="H" style="--nana-qr-foreground:#134e4a;--nana-qr-background:#ffffff"></nana-qr-code>
<nana-qr-code value="https://nanatec.co.ke" logo="N" error-correction="H" style="--nana-qr-foreground:#0d1117;--nana-qr-background:#ffffff;--nana-qr-logo-bg:#f59e0b;--nana-qr-logo-color:#111111"></nana-qr-code>
```

```html
<!-- Monogram — styled automatically -->
<nana-qr-code value="https://nanatec.co.ke" logo="N" error-correction="H"></nana-qr-code>

<!-- Or slot a custom logo image -->
<nana-qr-code value="https://nanatec.co.ke" error-correction="H">
  <img src="/logo.svg" alt="Nanatec" />
</nana-qr-code>
```

## API

## Slots

| Slot | Description |
|---|---|
| `(default)` | Optional center logo / overlay (e.g. an `&lt;img>`). Use a high `error-correction` level so the code stays scannable. |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-qr-foreground` | — | Module colour |
| `--nana-qr-background` | — | Background / quiet-zone colour |
| `--nana-qr-radius` | — | Frame corner radius |
| `--nana-qr-logo-size` | — | Logo width / monogram tile size (default 22% / 2.25rem) |
| `--nana-qr-logo-bg` | — | Monogram tile background (default: the module colour) |
| `--nana-qr-logo-color` | — | Monogram text colour (default #fff) |
| `--nana-qr-logo-radius` | — | Monogram tile corner radius (default 0.5rem) |

## CSS Parts

| Part | Description |
|---|---|
| `frame` | The bordered background frame |
| `svg` | The SVG element |
| `modules` | The `<path>` of dark modules |
| `logo` | The center logo / monogram container |

## Related components

<ul class="related not-content">
  <li><a href="/components/table/">Table</a></li>
  <li><a href="/components/carousel/">Carousel</a></li>
  <li><a href="/components/carousel-item/">Carousel Item</a></li>
  <li><a href="/components/image-comparer/">Image Comparer</a></li>
  <li><a href="/components/icon/">Icon</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-qr-code--docs