# QR Code

URL: https://ark-ui.com/docs/components/qr-code
LLM: https://ark-ui.com/llms.txt/components/qr-code

A component that generates a QR code based on the provided data.

---



## Anatomy



```tsx
<QrCode.Root>
  <QrCode.Frame>
    <QrCode.Pattern />
  </QrCode.Frame>
  <QrCode.Overlay />
  <QrCode.DownloadTrigger />
</QrCode.Root>
```

## Examples

```tsx
import { QrCode } from '@ark-ui/react/qr-code'
import styles from 'styles/qr-code.module.css'

export const Basic = () => {
  return (
    <QrCode.Root className={styles.Root} defaultValue="http://ark-ui.com">
      <QrCode.Frame className={styles.Frame}>
        <QrCode.Pattern className={styles.Pattern} />
      </QrCode.Frame>
    </QrCode.Root>
  )
}
```

### With Overlay

You can also add a logo or overlay to the QR code. This is useful when you want to brand the QR code.

```tsx
import { QrCode } from '@ark-ui/react/qr-code'
import styles from 'styles/qr-code.module.css'

export const Overlay = () => {
  return (
    <QrCode.Root className={styles.Root} defaultValue="http://ark-ui.com" encoding={{ ecc: 'H' }}>
      <QrCode.Frame className={styles.Frame}>
        <QrCode.Pattern className={styles.Pattern} />
      </QrCode.Frame>
      <QrCode.Overlay className={styles.Overlay}>
        <img src="https://ark-ui.com/icon-192.png" alt="Ark UI Logo" />
      </QrCode.Overlay>
    </QrCode.Root>
  )
}
```

### Error Correction

In cases where the link is too long or the logo overlay covers a significant area, the error correction level can be
increased.

Use the `encoding.ecc` or `encoding.boostEcc` property to set the error correction level:

- `L`: Allows recovery of up to 7% data loss (default)
- `M`: Allows recovery of up to 15% data loss
- `Q`: Allows recovery of up to 25% data loss
- `H`: Allows recovery of up to 30% data loss

```tsx
import { QrCode } from '@ark-ui/react/qr-code'
import { RadioGroup } from '@ark-ui/react/radio-group'
import { useState } from 'react'
import styles from 'styles/qr-code.module.css'
import radio from 'styles/radio-group.module.css'

type ErrorLevel = 'L' | 'M' | 'Q' | 'H'

export const ErrorCorrection = () => {
  const [errorLevel, setErrorLevel] = useState<ErrorLevel>('L')

  return (
    <div className="stack">
      <QrCode.Root className={styles.Root} defaultValue="http://ark-ui.com" encoding={{ ecc: errorLevel }}>
        <QrCode.Frame className={styles.Frame}>
          <QrCode.Pattern className={styles.Pattern} />
        </QrCode.Frame>
      </QrCode.Root>
      <RadioGroup.Root
        className={radio.Root}
        defaultValue="L"
        orientation="horizontal"
        onValueChange={(e) => setErrorLevel(e.value as ErrorLevel)}
      >
        <div className="hstack">
          {['L', 'M', 'Q', 'H'].map((level) => (
            <RadioGroup.Item className={radio.Item} key={level} value={level}>
              <RadioGroup.ItemControl className={radio.ItemControl} />
              <RadioGroup.ItemText className={radio.ItemText}>{level}</RadioGroup.ItemText>
              <RadioGroup.ItemHiddenInput />
            </RadioGroup.Item>
          ))}
        </div>
      </RadioGroup.Root>
    </div>
  )
}
```

### Root Provider

An alternative way to control the QR code is to use the `RootProvider` component and the `useQrCode` hook. This way you
can access the state and methods from outside the component.

```tsx
import { QrCode, useQrCode } from '@ark-ui/react/qr-code'
import styles from 'styles/qr-code.module.css'

export const RootProvider = () => {
  const qrCode = useQrCode({ value: 'http://ark-ui.com' })

  return (
    <div className="stack">
      <QrCode.RootProvider className={styles.Root} value={qrCode}>
        <QrCode.Frame className={styles.Frame}>
          <QrCode.Pattern className={styles.Pattern} />
        </QrCode.Frame>
      </QrCode.RootProvider>
      <output>{qrCode.value}</output>
    </div>
  )
}
```

### Download

Use the `QrCode.DownloadTrigger` component to allow users to download the QR code as an image. Specify the `fileName`
and `mimeType` props for the downloaded file.

```tsx
import { QrCode } from '@ark-ui/react/qr-code'
import button from 'styles/button.module.css'
import styles from 'styles/qr-code.module.css'

export const Download = () => {
  return (
    <QrCode.Root className={styles.Root} defaultValue="http://ark-ui.com">
      <QrCode.Frame className={styles.Frame}>
        <QrCode.Pattern className={styles.Pattern} />
      </QrCode.Frame>
      <QrCode.DownloadTrigger className={button.Root} fileName="qr-code.png" mimeType="image/png">
        Download
      </QrCode.DownloadTrigger>
    </QrCode.Root>
  )
}
```

## API Reference

### Props

### Root

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`defaultValue`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The initial value to encode when rendered.
Use when you don't need to control the value of the qr code.

**`encoding`**
Type: `QrCodeGenerateOptions`
Required: false
Default Value: `undefined`
Description: The qr code encoding options.

**`id`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The unique identifier of the machine.

**`ids`**
Type: `Partial<{ root: string; frame: string; overlay: string }>`
Required: false
Default Value: `undefined`
Description: The element ids.

**`onValueChange`**
Type: `(details: ValueChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Callback fired when the value changes.

**`pixelSize`**
Type: `number`
Required: false
Default Value: `undefined`
Description: The pixel size of the qr code.

**`value`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The controlled value to encode.

### DownloadTrigger

#### Props

**`fileName`**
Type: `string`
Required: true
Default Value: `undefined`
Description: The name of the file.

**`mimeType`**
Type: `DataUrlType`
Required: true
Default Value: `undefined`
Description: The mime type of the image.

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`quality`**
Type: `number`
Required: false
Default Value: `undefined`
Description: The quality of the image.

### Frame

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### Overlay

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### Pattern

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### RootProvider

#### Props

**`value`**
Type: `UseQrCodeReturn`
Required: true
Default Value: `undefined`
Description: undefined

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `value` | `string` | The value to encode. |
| `setValue` | `(value: string) => void` | Set the value to encode. |
| `getDataUrl` | `(type: DataUrlType, quality?: number) => Promise<string>` | Returns the data URL of the qr code. Includes the overlay when present. |