QR Code

Component

About

QR code on uqr, rendered as crisp SVG, with L/M/Q/H error correction, quiet-zone control and custom colors.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds QR Code to your project and fits it to your theme.

Code

How QR Code is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

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

const longPayload =
  'https://hirael.com/components/qr-code?utm_source=showcase&utm_medium=demo&utm_campaign=error-correction';

export default function QrCodeDemo() {
  return (
    <div className="grid w-full max-w-2xl gap-8">
      <div className="grid gap-2">
        <p className="text-xs text-muted-foreground uppercase">Sizes</p>
        <div className="flex items-end gap-4">
          <QRCode value="https://hirael.com" size={64} title="hirael.com" />
          <QRCode value="https://hirael.com" size={96} title="hirael.com" />
          <QRCode value="https://hirael.com" size={128} title="hirael.com" />
        </div>
      </div>

      <div className="grid gap-2">
        <p className="text-xs text-muted-foreground uppercase">Custom colors</p>
        <div className="flex items-center gap-4">
          <QRCode value="https://hirael.com" size={96} foreground="#1c1917" background="#f5f5f4" />
          <QRCode value="https://hirael.com" size={96} foreground="#1e3a8a" background="#eff6ff" />
          <QRCode value="https://hirael.com" size={96} foreground="#14532d" background="#f0fdf4" />
        </div>
      </div>

      <div className="grid gap-2">
        <p className="text-xs text-muted-foreground uppercase">Error correction, L vs H</p>
        <div className="flex items-end gap-6">
          <div className="grid justify-items-center gap-1.5">
            <QRCode value={longPayload} level="L" size={112} />
            <span className="font-mono text-[10px] text-muted-foreground">level=&quot;L&quot;</span>
          </div>
          <div className="grid justify-items-center gap-1.5">
            <QRCode value={longPayload} level="H" size={112} />
            <span className="font-mono text-[10px] text-muted-foreground">level=&quot;H&quot;</span>
          </div>
        </div>
      </div>

      <div className="grid gap-2">
        <p className="text-xs text-muted-foreground uppercase">In a card</p>
        <div className="grid w-fit justify-items-center gap-3 rounded-lg border border-border bg-card p-6">
          <QRCode value="https://hirael.com" size={128} title={'Scan to open hirael.com'} />
          <p className="text-xs text-muted-foreground">Scan to open hirael.com</p>
        </div>
      </div>
    </div>
  );
}