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="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 };
Part of Spell — browse the full library on 21st.dev.