Skip to main content

​
Installation

npm install @kuzenbo/core

​
Usage

import { QRCode } from "@kuzenbo/core";

function Example() {
  return (
    <div className="w-48 h-48">
      <QRCode data="https://kuzenbo.dev" />
    </div>
  );
}

​
Props

​
data
string
required
The data to encode in the QR code.
​
foreground
string
The foreground color (dark modules). Defaults to theme foreground color.
​
background
string
The background color (light modules). Defaults to theme background color.
​
robustness
'L' | 'M' | 'Q' | 'H'
default:"'M'"
Error correction level:
  • L: ~7% damage recovery
  • M: ~15% damage recovery
  • Q: ~25% damage recovery
  • H: ~30% damage recovery
​
className
string
Additional CSS classes to apply.

​
Examples

​
Basic QR Code

<div className="w-64 h-64">
  <QRCode data="https://example.com" />
</div>

​
Custom Colors

<div className="w-64 h-64">
  <QRCode
    data="https://example.com"
    foreground="oklch(0.5 0.2 250)"
    background="oklch(0.95 0 0)"
  />
</div>

​
High Error Correction

<div className="w-64 h-64">
  <QRCode
    data="https://example.com"
    robustness="H"
  />
</div>

​
Contact Information

const vCardData = `BEGIN:VCARD
VERSION:3.0
FN:John Doe
TEL:+1-234-567-8900
EMAIL:[email protected]
END:VCARD`;

<div className="w-64 h-64">
  <QRCode data={vCardData} />
</div>

​
WiFi Configuration

const wifiData = "WIFI:T:WPA;S:NetworkName;P:password123;;";

<div className="w-64 h-64">
  <QRCode data={wifiData} />
</div>

Build docs developers (and LLMs) love

Get started for freeTalk to us