QR Code

QR code display component with logo overlay, sizes, bordered variant, actions, and loading/error states.

Basic QR Code

Preview

<div class="qr">
  <div class="qr-wrapper">
    <canvas class="qr-canvas" width="180" height="180" style="background: #f3f4f6; display: flex; align-items: center; justify-content: center;"></canvas>
  </div>
</div>

Requires: ux.min.css

<div class="inline-flex flex-col items-center gap-2">
  <div class="relative inline-block">
    <canvas class="block rounded" width="180" height="180" style="background: #f3f4f6;"></canvas>
  </div>
</div>

Requires: tw.min.css

// Generate QR code using a library like qrcode.js:
// import QRCode from 'qrcode';
// QRCode.toCanvas(document.querySelector('.qr-canvas'), 'https://example.com');

With Logo & Label

Preview

Scan to visit website

<div class="qr">
  <div class="qr-wrapper">
    <canvas class="qr-canvas" width="180" height="180" style="background: #f3f4f6;"></canvas>
    <div class="qr-logo" style="width: 40px; height: 40px;">
      <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234f46e5'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E" alt="Logo"/>
    </div>
  </div>
  <div class="qr-label">Scan to visit website</div>
</div>

Requires: ux.min.css

<div class="inline-flex flex-col items-center gap-2">
  <div class="relative inline-block">
    <canvas class="block rounded" width="180" height="180" style="background: #f3f4f6;"></canvas>
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-1 rounded" style="width: 40px; height: 40px;">
      <img src="..." alt="Logo" class="block w-full h-full object-contain"/>
    </div>
  </div>
  <span class="text-sm text-base-content/60 text-center">Scan to visit website</span>
</div>

Requires: tw.min.css

// No JavaScript required for styling

Sizes

Preview

Small

Default

Large

<div class="flex items-end gap-6">
  <div class="qr qr-sm">
    <div class="qr-wrapper">
      <canvas class="qr-canvas" style="width: 100px; height: 100px; background: #f3f4f6;"></canvas>
    </div>
    <div class="qr-label">Small</div>
  </div>

  <div class="qr">
    <div class="qr-wrapper">
      <canvas class="qr-canvas" style="width: 180px; height: 180px; background: #f3f4f6;"></canvas>
    </div>
    <div class="qr-label">Default</div>
  </div>

  <div class="qr qr-lg">
    <div class="qr-wrapper">
      <canvas class="qr-canvas" style="width: 250px; height: 250px; background: #f3f4f6;"></canvas>
    </div>
    <div class="qr-label">Large</div>
  </div>
</div>

Requires: ux.min.css

<div class="flex items-end gap-6">
  <div class="flex flex-col items-center gap-2">
    <div class="bg-base-200 rounded-lg" style="width: 100px; height: 100px;"></div>
    <span class="text-xs text-base-content/60">Small</span>
  </div>
  <div class="flex flex-col items-center gap-2">
    <div class="bg-base-200 rounded-lg" style="width: 180px; height: 180px;"></div>
    <span class="text-xs text-base-content/60">Default</span>
  </div>
  <div class="flex flex-col items-center gap-2">
    <div class="bg-base-200 rounded-lg" style="width: 250px; height: 250px;"></div>
    <span class="text-xs text-base-content/60">Large</span>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required

Bordered with Actions

Preview

<div class="qr qr-bordered">
  <div class="qr-wrapper">
    <canvas class="qr-canvas" style="width: 180px; height: 180px; background: #f3f4f6;"></canvas>
  </div>
  <div class="qr-actions">
    <button class="qr-action">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
      Download
    </button>
    <button class="qr-action">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
      Copy
    </button>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col items-center gap-3">
  <div class="p-4 bg-white border border-base-300 rounded-xl">
    <div class="bg-base-200 rounded-lg" style="width: 180px; height: 180px;"></div>
  </div>
  <div class="flex gap-2">
    <button class="btn btn-sm gap-1.5">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
      Download
    </button>
    <button class="btn btn-sm gap-1.5">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
      Copy
    </button>
  </div>
</div>

Requires: tw.min.css

// Download QR as image:
// const canvas = document.querySelector('.qr-canvas');
// const link = document.createElement('a');
// link.download = 'qr-code.png';
// link.href = canvas.toDataURL();
// link.click();

Loading & Error States

Preview

Generating...

Failed to generate

<div class="flex items-start gap-6">
  <!-- Loading -->
  <div class="qr">
    <div class="qr-loading" style="width: 180px; height: 180px;">
      <div class="qr-spinner"></div>
    </div>
    <div class="qr-label">Generating...</div>
  </div>

  <!-- Error -->
  <div class="qr">
    <div class="qr-error" style="width: 180px; height: 180px;">
      <svg class="qr-error-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
      <div class="qr-error-text">Failed to generate</div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex items-start gap-6">
  <!-- Loading -->
  <div class="flex flex-col items-center gap-2">
    <div class="flex items-center justify-center bg-base-200 rounded-lg" style="width: 180px; height: 180px;">
      <div class="w-8 h-8 border-3 border-base-300 border-t-primary rounded-full animate-spin"></div>
    </div>
    <span class="text-xs text-base-content/60">Generating...</span>
  </div>
  <!-- Error -->
  <div class="flex flex-col items-center gap-2">
    <div class="flex flex-col items-center justify-center gap-2 bg-error/5 border border-error/20 rounded-lg" style="width: 180px; height: 180px;">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-8 text-error/60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
      <span class="text-xs text-error/80">Failed to generate</span>
    </div>
  </div>
</div>

Requires: tw.min.css

// Show loading state while generating, swap to canvas when ready