QR Code

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

Anatomy

To set up the QR code correctly, you'll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Learn how to use the QR Code component in your project. Let's take a look at the most basic example:

import { QrCode } from '@ark-ui/react'

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

import { QrCode } from '@ark-ui/solid'

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

<script setup lang="ts">
import { QrCode } from '@ark-ui/vue'
</script>

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

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.

import { QrCode } from '@ark-ui/react'

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

import { QrCode } from '@ark-ui/solid'

export const Basic = () => {
  return (
    <QrCode.Root value="http://ark-ui.com">
      <QrCode.Frame>
        <QrCode.Pattern />
      </QrCode.Frame>
      <QrCode.Overlay>
        <img src="https://ark-ui.com/icon-192.png" alt="Ark UI Logo" />
      </QrCode.Overlay>
    </QrCode.Root>
  )
}

<script setup lang="ts">
import { QrCode } from '@ark-ui/vue'
</script>

<template>
  <QrCode.Root value="http://ark-ui.com">
    <QrCode.Frame>
      <QrCode.Pattern />
    </QrCode.Frame>
    <QrCode.Overlay>
      <img src="https://ark-ui.com/icon-192.png" alt="Ark UI Logo" />
    </QrCode.Overlay>
  </QrCode.Root>
</template>

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

import { QrCode } from '@ark-ui/react'

export const Basic = () => {
  return (
    <QrCode.Root value="http://ark-ui.com" encoding={{ ecc: 'H' }}>
      <QrCode.Frame>
        <QrCode.Pattern />
      </QrCode.Frame>
    </QrCode.Root>
  )
}

import { QrCode } from '@ark-ui/solid'

export const Basic = () => {
  return (
    <QrCode.Root value="http://ark-ui.com" encoding={{ ecc: 'H' }}>
      <QrCode.Frame>
        <QrCode.Pattern />
      </QrCode.Frame>
    </QrCode.Root>
  )
}

<script setup lang="ts">
import { ref } from 'vue'
import { QrCode, type QrCodeGenerateOptions } from '@ark-ui/vue'

const encoding = ref<QrCodeGenerateOptions>({ ecc: 'H' })
</script>

<template>
  <QrCode.Root value="http://ark-ui.com" :encoding="encoding">
    <QrCode.Frame>
      <QrCode.Pattern />
    </QrCode.Frame>
  </QrCode.Root>
</template>

API Reference

Root

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`encoding`		`QrCodeGenerateOptions` The qr code encoding options.
`ids`		`Partial<{ root: string; frame: string }>` The element ids.
`value`		`string` The value to encode.

Frame

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Overlay

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Pattern

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

RootProvider

Prop	Default	Type
`value`		`UseQrCodeReturn`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.