QR Code

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add https://shark.vini.one/r/qr-code.json

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 an 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 wrapper for the QR code and optional overlay/actions.

QrCodeFrame

SVG containing the QR pattern. Scales with size.

QrCodeOverlay

Optional center overlay (e.g. logo) on top of the QR pattern.

QrCodeDownload

Downloads the QR code as an image file.

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