<QrCode value="https://www.hygge-ui.com" />Examples
Sizes
Use the size prop to change the size of the QR code.
<div className="flex flex-col gap-2">
<QrCode size="2xs" value="https://www.hygge-ui.com" />
<QrCode size="xs" value="https://www.hygge-ui.com" />
<QrCode size="sm" value="https://www.hygge-ui.com" />
<QrCode size="md" value="https://www.hygge-ui.com" />
<QrCode size="lg" value="https://www.hygge-ui.com" />
<QrCode size="xl" value="https://www.hygge-ui.com" />
<QrCode size="2xl" value="https://www.hygge-ui.com" />
</div>Overlay
Use the overlay prop to add a logo or overlay to the QR code. This is useful when you want to brand the QR code.
<QrCode
value="https://www.hygge-ui.com"
overlay={
<img src="https://ark-ui.com/icon-192.png" alt="Ark UI Logo" />
}
/>Fill
Use the fill prop to set the fill color of the QR code.
<QrCode value="https://www.hygge-ui.com" fill="#eb5e41" />Download
Use the QrCodeDownloadTrigger to download the QR code.
<QrCode value="https://www.hygge-ui.com">
<QrCodeDownloadTrigger
asChild
fileName="qr-code.png"
mimeType="image/png"
>
<Button size="sm">Download</Button>
</QrCodeDownloadTrigger>
</QrCode>Loading
Pass the loading prop to show a spinner.
<QrCode value="https://www.hygge-ui.com" loading />