QR Code

Cards 11

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

const levels = ["L", "M", "Q", "H"] as const;

function Demo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
      <div className="rounded-3xl border bg-card p-6 shadow-2xl">
        <div className="mb-5">
          <p className="text-sm text-muted-foreground">Error correction</p>
          <h3 className="text-2xl font-semibold tracking-tight">Four Levels</h3>
        </div>
        <div className="grid grid-cols-4 gap-4">
          {levels.map((level) => (
            <div key={level} className="flex flex-col items-center gap-2">
              <QRCode
                value={`https://21st.dev/qr-${level}`}
                size={126}
                errorCorrectionLevel={level}
                fgColor="#f8fafc"
                bgColor="#020617"
                className="rounded-xl border"
              />
              <span className="text-xs text-muted-foreground">Level {level}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}


export default { Demo };