Components
Qr code

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/qr-code'

export const Basic = () => {
  return (
    <QrCode.Root value="http://ark-ui.com">
      <QrCode.Frame>
        <QrCode.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.

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

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

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/qr-code'

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

API Reference

Root

PropDefaultType
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

PropDefaultType
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

PropDefaultType
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

PropDefaultType
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

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