---
title: QR Code
description: A highly customizable QR code component with support for theme-aware coloring, custom dot styling, and logo embedding
---

<ComponentPreview name="qrcode-demo" dependencies={["qr-code-styling"]} />

## Installation

<Installation name="qrcode" dependencies={["qr-code-styling"]} />

## Usage

The QR code component uses `qr-code-styling` and automatically syncs with your shadcn/ui theme variables. It supports CSS variables for colors, making it theme-aware out of the box.

```tsx
import QRCode from "@/components/ui/qrcode"

export default function Example() {
  return (
    <QRCode value="https://deltacomponents.dev" size={200} dotStyle="rounded" />
  )
}
```

## Examples

### Styles Variations

Customize the dots, corner squares, and corner dots independently to match your brand identity.

<ComponentPreview
  name="qrcode-purple-dots-demo"
  dependencies={["qr-code-styling"]}
/>

### With Logo

Embed a logo in the center. The component automatically clears dots behind the logo to maintain scannability.

<ComponentPreview name="qrcode-logo-demo" dependencies={["qr-code-styling"]} />

### Clickable Navigation

Enable navigation to make the QR code clickable, opening the URL in a new tab. Includes keyboard accessibility support.

```tsx
<QRCode value="https://example.com" enableNavigation={true} size={200} />
```

## Notes

### Theme Awareness

This component uses a `resolveColor` helper that accepts CSS variables (e.g., `--color-background`) or direct color values (e.g., `#ffffff`). When CSS variables are provided, the component resolves them by reading computed styles from `document.documentElement`.

A `MutationObserver` watches for changes to the `class` and `data-theme` attributes on the document element, automatically updating the QR code when your theme switches. This ensures the QR code remains readable immediately after a theme toggle without requiring a page refresh.

### Error Correction Levels

The `level` prop controls how much data can be recovered if the QR code is damaged or obscured. Use higher levels when adding logos or when the code might be printed on textured surfaces:

- `"L"` (Low): ~7% recovery - Use for simple QR codes without logos
- `"M"` (Medium): ~15% recovery - Default for general use
- `"Q"` (Quartile): ~25% recovery - Recommended when adding small logos
- `"H"` (High): ~30% recovery - Use for large logos or when maximum durability is needed

When using `logoSize` above `0.2`, always use `level="Q"` or `level="H"` to maintain scannability.

### Logo Best Practices

When embedding logos:

- Keep `logoSize` between `0.15` and `0.25` for optimal balance between branding and scannability
- Use `logoMargin` to add padding around the logo (typically 4-8 pixels)
- Increase error correction level to `"Q"` or `"H"` when logo is present
- Test scannability with multiple QR code readers before deployment

### Empty State

When no `value` is provided, the component renders an animated placeholder with a dashed border. This is useful for loading states or form previews.

### Keyboard Accessibility

When `enableNavigation` is enabled, the QR code becomes a focusable button supporting both `Enter` and `Space` keys for activation. It also includes proper ARIA roles for screen reader support.

## API Reference

### Props

| Prop                | Type                                                                                          | Default                | Description                                                                                             |
| ------------------- | --------------------------------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- |
| `value`             | `string`                                                                                      | —                      | Required. The data or URL to encode in the QR code.                                                     |
| `size`              | `number`                                                                                      | `200`                  | Width and height of the QR code in pixels.                                                              |
| `bgColor`           | `string`                                                                                      | `"--color-background"` | Background color. Supports CSS variables (e.g., `--color-background`) or color values.                  |
| `fgColor`           | `string`                                                                                      | `"--color-foreground"` | Foreground color for dots and corners. Supports CSS variables or color values.                          |
| `level`             | `"L" \| "M" \| "Q" \| "H"`                                                                    | `"M"`                  | Error correction level. Higher levels allow more data recovery but create denser QR codes.              |
| `marginSize`        | `number`                                                                                      | `0`                    | Quiet zone margin around the QR code in pixels.                                                         |
| `className`         | `string`                                                                                      | —                      | Additional CSS classes for the wrapper element.                                                         |
| `enableNavigation`  | `boolean`                                                                                     | `false`                | When true, makes the QR code clickable and opens the URL in a new tab. Includes keyboard support.       |
| `dotStyle`          | `"rounded" \| "dots" \| "classy" \| "classy-rounded" \| "square" \| "extra-rounded"`          | `"square"`             | Style of the QR code data dots.                                                                         |
| `cornerSquareStyle` | `"dot" \| "square" \| "extra-rounded" \| "rounded" \| "dots" \| "classy" \| "classy-rounded"` | `"square"`             | Style of the three position detection corner squares.                                                   |
| `cornerDotStyle`    | `"dot" \| "square" \| "rounded" \| "dots" \| "classy" \| "classy-rounded" \| "extra-rounded"` | `"square"`             | Style of the dots inside the corner squares.                                                            |
| `logoImage`         | `string`                                                                                      | —                      | URL or data URI of the logo to embed in the center of the QR code.                                      |
| `logoSize`          | `number`                                                                                      | `0.2`                  | Size of the logo as a percentage of the QR code size (0 to 1). Keep between 0.15-0.25 for best results. |
| `logoMargin`        | `number`                                                                                      | `0`                    | Margin around the logo in pixels. Creates padding between the logo and QR code dots.                    |