A QR code generator with rounded finder patterns and dot-style data modules. Foreground and background default to theme tokens, so it adapts to light and dark mode out of the box.

Installation

{
  "registries": {
    "@ikui": "https://ik-ui.pages.dev/r/{name}.json"
  }
}

pnpm dlx shadcn@latest add @ikui/qr-code

Usage

import { QRCode } from "@/components/qr-code";

<QRCode value="https://example.com" />
<QRCode value="https://example.com" size={140} />

Examples

Colors

Sizes

Control the rendered pixel size with size.

Quiet zone

marginSize adds a quiet zone around the code, measured in modules. 0 (left) renders edge-to-edge; 4 (right) follows the spec's recommended margin.

Border

Toggle bordered to wrap the code in a themed border.

Error correction

Higher errorLevel adds redundancy (and modules), so the code survives more damage or overlay — L, M, Q, H from left to right.

Module shape

dotType and finderType switch between the rounded dot style (left) and a classic square style (right) for higher scanner compatibility.

Status overlay

status overlays the code with loading, expired, or scanned feedback. expired blurs the code and exposes a refresh action via onRefresh.

Center icon

Drop an image in the center with icon. Bump errorLevel to "H" so the code stays scannable behind the logo.

Canvas render

Set type="canvas" to rasterize to a <canvas>. Canvas resolves colors once at draw time, so pass explicit fgColor/bgColor rather than theme tokens.

Download

Pass a ref to get a QRCodeHandle with download(filename?) and toDataURL(mimeType?). canvas exports a PNG, svg exports a vector .svg. Pass explicit fgColor/bgColor so the exported file keeps its colors outside the page.

Props