QR code generator with rounded finder patterns and dot-style data modules.
"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 };
Part of Spell — browse the full library on 21st.dev.