QR Code

Component 19

About

QR code generator with rounded finder patterns and dot-style data modules.

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";

function Demo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
      <div className="grid grid-cols-3 gap-5 rounded-3xl border bg-card p-6 shadow-2xl">
        <QRCode
          value="https://spell.sh/docs/qr-code"
          size={172}
          fgColor="#0ea5e9"
          bgColor="#020617"
          className="rounded-xl border border-sky-400/30"
        />
        <QRCode
          value="https://21st.dev/tom_ui/qr-code"
          size={172}
          fgColor="#22c55e"
          bgColor="#052e16"
          className="rounded-xl border border-emerald-400/30"
        />
        <QRCode
          value="https://21st.dev/r/tom_ui/qr-code"
          size={172}
          fgColor="#f97316"
          bgColor="#431407"
          className="rounded-xl border border-orange-400/30"
        />
      </div>
    </div>
  );
}


export default { Demo };