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-partattribute 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>
)
}
import { QrCode } from '@ark-ui/solid/qr-code'
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/qr-code'
</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/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>
)
}
import { QrCode } from '@ark-ui/solid/qr-code'
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/qr-code'
</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 lossQ: Allows recovery of up to 25% data lossH: 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>
)
}
import { QrCode } from '@ark-ui/solid/qr-code'
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 { QrCode, type QrCodeGenerateOptions } from '@ark-ui/vue/qr-code'
import { ref } from '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>