QR Code

Component 58

About

A crisp SVG QR code component with dots, rounded or square module styles that renders fully on the server and can optionally animate itself into view.

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

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

export default function QRCodeDemo() {
  return (
    <div className="flex items-center justify-center p-10">
      <div className="flex flex-col items-center gap-3 rounded-xl border bg-card p-6 shadow-sm">
        <QRCode value="https://github.com/KevinGirelli/corsair-ui" size={180} />
        <p className="text-sm text-muted-foreground">Scan to visit the repo</p>
      </div>
    </div>
  );
}