QR Code

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add @shark-ui/qr-code

Usage

import { 
  QrCode, 
  QrCodeFrame,
  QrCodeOverlay,
  QrCodeDownload,
} from "@/components/ui/qr-code";

<QrCode>
  <QrCodeFrame />
  <QrCodeOverlay />
  <QrCodeDownload />
</QrCode>

Size

Override the size with the --qr-code-size CSS variable on <QrCode />

For example, --qr-code-size:6rem for small, --qr-code-size:10rem for large

Examples

With an overlay

Use <QrCodeOverlay /> to add a overlay in the center.

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

Download

Use <QrCodeDownload /> with fileName and mimeType to let users download the QR code as an image.

API Reference

QrCode

Root element. Renders a div.

QrCodeFrame

SVG frame that contains the QR pattern. Renders an svg.

QrCodeOverlay

Overlay in the center of the QR code (e.g. logo). Renders a div.

QrCodeDownload

Trigger to download the QR code as an image. Renders a button.

For a complete list of props, see the Ark UI documentation.