QR Code

Cards 451

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="rounded-3xl border bg-card p-7 shadow-2xl">
        <div className="mb-5 flex items-center justify-between gap-12">
          <div>
            <p className="text-sm text-muted-foreground">Scan to install</p>
            <h3 className="text-2xl font-semibold tracking-tight">QR Code</h3>
          </div>
          <span className="rounded-full bg-muted px-3 py-1 text-xs text-muted-foreground">
            dot modules
          </span>
        </div>
        <QRCode
          value="https://21st.dev/r/tom_ui/qr-code"
          size={268}
          fgColor="#f8fafc"
          bgColor="#020617"
          className="rounded-xl border"
        />
      </div>
    </div>
  );
}


export default { Demo };