# QR Code

URL: https://ark-ui.com/docs/components/qr-code
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/qr-code.mdx

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

---

<ComponentPreview id="QrCode" />

## Anatomy

<Anatomy id="qr-code" />

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

## Examples

**Example: basic**

#### React

```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>
  )
}

```

#### Solid

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

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

```

#### Vue

```vue
<script setup lang="ts">
import { QrCode } from '@ark-ui/vue/qr-code'
import styles from 'styles/qr-code.module.css'
</script>

<template>
  <QrCode.Root :class="styles.Root" defaultValue="http://ark-ui.com">
    <QrCode.Frame :class="styles.Frame">
      <QrCode.Pattern :class="styles.Pattern" />
    </QrCode.Frame>
  </QrCode.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { QrCode } from '@ark-ui/svelte/qr-code'
  import styles from 'styles/qr-code.module.css'
</script>

<QrCode.Root class={styles.Root} defaultValue="http://ark-ui.com">
  <QrCode.Frame class={styles.Frame}>
    <QrCode.Pattern class={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.

**Example: overlay**

#### React

```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>
  )
}

```

#### Solid

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

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

```

#### Vue

```vue
<script setup lang="ts">
import { QrCode } from '@ark-ui/vue/qr-code'
import styles from 'styles/qr-code.module.css'
</script>

<template>
  <QrCode.Root :class="styles.Root" defaultValue="http://ark-ui.com" :encoding="{ ecc: 'H' }">
    <QrCode.Frame :class="styles.Frame">
      <QrCode.Pattern :class="styles.Pattern" />
    </QrCode.Frame>
    <QrCode.Overlay :class="styles.Overlay">
      <img src="https://ark-ui.com/icon-192.png" alt="Ark UI Logo" />
    </QrCode.Overlay>
  </QrCode.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { QrCode } from '@ark-ui/svelte/qr-code'
  import styles from 'styles/qr-code.module.css'
</script>

<QrCode.Root class={styles.Root} defaultValue="http://ark-ui.com" encoding={{ ecc: 'H' }}>
  <QrCode.Frame class={styles.Frame}>
    <QrCode.Pattern class={styles.Pattern} />
  </QrCode.Frame>
  <QrCode.Overlay class={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

**Example: error-correction**

#### React

```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>
  )
}

```

#### Solid

```tsx
import { QrCode } from '@ark-ui/solid/qr-code'
import { RadioGroup } from '@ark-ui/solid/radio-group'
import { For, createSignal } from 'solid-js'
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] = createSignal<ErrorLevel>('L')

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

```

#### Vue

```vue
<script setup lang="ts">
import { QrCode } from '@ark-ui/vue/qr-code'
import { RadioGroup } from '@ark-ui/vue/radio-group'
import { ref } from 'vue'
import styles from 'styles/qr-code.module.css'
import radio from 'styles/radio-group.module.css'

type ErrorLevel = 'L' | 'M' | 'Q' | 'H'
const errorLevel = ref<ErrorLevel>('L')
const levels: ErrorLevel[] = ['L', 'M', 'Q', 'H']
</script>

<template>
  <div class="stack">
    <QrCode.Root :class="styles.Root" defaultValue="http://ark-ui.com" :encoding="{ ecc: errorLevel }">
      <QrCode.Frame :class="styles.Frame">
        <QrCode.Pattern :class="styles.Pattern" />
      </QrCode.Frame>
    </QrCode.Root>
    <RadioGroup.Root
      :class="radio.Root"
      defaultValue="L"
      orientation="horizontal"
      @value-change="(e) => (errorLevel = e.value as ErrorLevel)"
    >
      <div class="hstack">
        <RadioGroup.Item v-for="level in levels" :key="level" :class="radio.Item" :value="level">
          <RadioGroup.ItemControl :class="radio.ItemControl" />
          <RadioGroup.ItemText :class="radio.ItemText">{{ level }}</RadioGroup.ItemText>
          <RadioGroup.ItemHiddenInput />
        </RadioGroup.Item>
      </div>
    </RadioGroup.Root>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { QrCode } from '@ark-ui/svelte/qr-code'
  import { RadioGroup } from '@ark-ui/svelte/radio-group'
  import styles from 'styles/qr-code.module.css'
  import radio from 'styles/radio-group.module.css'

  type ErrorLevel = 'L' | 'M' | 'Q' | 'H'
  let errorLevel = $state<ErrorLevel>('L')
  const levels: ErrorLevel[] = ['L', 'M', 'Q', 'H']
</script>

<div class="stack">
  <QrCode.Root class={styles.Root} defaultValue="http://ark-ui.com" encoding={{ ecc: errorLevel }}>
    <QrCode.Frame class={styles.Frame}>
      <QrCode.Pattern class={styles.Pattern} />
    </QrCode.Frame>
  </QrCode.Root>
  <RadioGroup.Root
    class={radio.Root}
    defaultValue="L"
    orientation="horizontal"
    onValueChange={(e) => (errorLevel = e.value as ErrorLevel)}
  >
    <div class="hstack">
      {#each levels as level}
        <RadioGroup.Item class={radio.Item} value={level}>
          <RadioGroup.ItemControl class={radio.ItemControl} />
          <RadioGroup.ItemText class={radio.ItemText}>{level}</RadioGroup.ItemText>
          <RadioGroup.ItemHiddenInput />
        </RadioGroup.Item>
      {/each}
    </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.

**Example: root-provider**

#### React

```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>
  )
}

```

#### Solid

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

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

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

```

#### Vue

```vue
<script setup lang="ts">
import { QrCode, useQrCode } from '@ark-ui/vue/qr-code'
import styles from 'styles/qr-code.module.css'

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

<template>
  <div class="stack">
    <QrCode.RootProvider :class="styles.Root" :value="qrCode">
      <QrCode.Frame :class="styles.Frame">
        <QrCode.Pattern :class="styles.Pattern" />
      </QrCode.Frame>
    </QrCode.RootProvider>
    <output>{{ qrCode.value }}</output>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { QrCode, useQrCode } from '@ark-ui/svelte/qr-code'
  import styles from 'styles/qr-code.module.css'

  const id = $props.id()
  const qrCode = useQrCode({ id, value: 'http://ark-ui.com' })
</script>

<div class="stack">
  <QrCode.RootProvider class={styles.Root} value={qrCode}>
    <QrCode.Frame class={styles.Frame}>
      <QrCode.Pattern class={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.

**Example: download**

#### React

```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>
  )
}

```

#### Solid

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

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

```

#### Vue

```vue
<script setup lang="ts">
import { QrCode } from '@ark-ui/vue/qr-code'
import button from 'styles/button.module.css'
import styles from 'styles/qr-code.module.css'
</script>

<template>
  <QrCode.Root :class="styles.Root" defaultValue="http://ark-ui.com">
    <QrCode.Frame :class="styles.Frame">
      <QrCode.Pattern :class="styles.Pattern" />
    </QrCode.Frame>
    <QrCode.DownloadTrigger :class="button.Root" fileName="qr-code.png" mimeType="image/png">
      Download
    </QrCode.DownloadTrigger>
  </QrCode.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { QrCode } from '@ark-ui/svelte/qr-code'
  import button from 'styles/button.module.css'
  import styles from 'styles/qr-code.module.css'
</script>

<QrCode.Root class={styles.Root} defaultValue="http://ark-ui.com">
  <QrCode.Frame class={styles.Frame}>
    <QrCode.Pattern class={styles.Pattern} />
  </QrCode.Frame>
  <QrCode.DownloadTrigger class={button.Root} fileName="qr-code.png" mimeType="image/png">
    Download
  </QrCode.DownloadTrigger>
</QrCode.Root>

```

## API Reference

### Props

**Component API Reference**

#### React

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `string` | No | The initial value to encode when rendered.
Use when you don't need to control the value of the qr code. |
| `encoding` | `QrCodeGenerateOptions` | No | The qr code encoding options. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; frame: string }>` | No | The element ids. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Callback fired when the value changes. |
| `pixelSize` | `number` | No | The pixel size of the qr code. |
| `value` | `string` | No | The controlled value to encode. |


**Root CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--qrcode-pixel-size` | The size of the Root |
| `--qrcode-width` | The width of the Root |
| `--qrcode-height` | The height of the Root |


**DownloadTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `fileName` | `string` | Yes | The name of the file. |
| `mimeType` | `DataUrlType` | Yes | The mime type of the image. |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `quality` | `number` | No | The quality of the image. |


**Frame Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Overlay Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Pattern Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseQrCodeReturn` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `string` | No | The initial value to encode when rendered.
Use when you don't need to control the value of the qr code. |
| `encoding` | `QrCodeGenerateOptions` | No | The qr code encoding options. |
| `ids` | `Partial<{ root: string; frame: string }>` | No | The element ids. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Callback fired when the value changes. |
| `pixelSize` | `number` | No | The pixel size of the qr code. |
| `value` | `string` | No | The controlled value to encode. |


**Root CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--qrcode-pixel-size` | The size of the Root |
| `--qrcode-width` | The width of the Root |
| `--qrcode-height` | The height of the Root |


**DownloadTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `fileName` | `string` | Yes | The name of the file. |
| `mimeType` | `DataUrlType` | Yes | The mime type of the image. |
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `quality` | `number` | No | The quality of the image. |


**Frame Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'svg'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Overlay Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Pattern Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'path'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseQrCodeReturn` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Vue

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `string` | No | The initial value to encode when rendered.
Use when you don't need to control the value of the qr code. |
| `encoding` | `QrCodeGenerateOptions` | No | The qr code encoding options. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; frame: string }>` | No | The element ids. |
| `modelValue` | `string` | No | The v-model value of the qr code |
| `pixelSize` | `number` | No | The pixel size of the qr code. |


**Root CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--qrcode-pixel-size` | The size of the Root |
| `--qrcode-width` | The width of the Root |
| `--qrcode-height` | The height of the Root |


**DownloadTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `fileName` | `string` | Yes | The name of the file. |
| `mimeType` | `DataUrlType` | Yes | The mime type of the image. |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `quality` | `number` | No | The quality of the image. |


**Frame Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Overlay Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Pattern Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `QrCodeApi<PropTypes>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `string` | No | The initial value to encode when rendered.
Use when you don't need to control the value of the qr code. |
| `encoding` | `QrCodeGenerateOptions` | No | The qr code encoding options. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; frame: string }>` | No | The element ids. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Callback fired when the value changes. |
| `pixelSize` | `number` | No | The pixel size of the qr code. |
| `ref` | `Element` | No |  |
| `value` | `string` | No | The controlled value to encode. |


**Root CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--qrcode-pixel-size` | The size of the Root |
| `--qrcode-width` | The width of the Root |
| `--qrcode-height` | The height of the Root |


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `api` | `Snippet<[UseQrCodeContext]>` | No |  |


**DownloadTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `fileName` | `string` | Yes | The name of the file. |
| `mimeType` | `DataUrlType` | Yes | The mime type of the image. |
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `quality` | `number` | No | The quality of the image. |
| `ref` | `Element` | No |  |


**Frame Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'svg'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Overlay Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Pattern Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'path'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseQrCodeReturn` | Yes |  |
| `ref` | `Element` | No |  |


### 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. |