A QR code generator with no dependencies: text is encoded as UTF-8 bytes into the smallest version from 1 to 40 that fits, with Reed-Solomon error correction at L, M, Q or H and the mask the standard's penalty rules pick. Drawn as one crisp SVG path in square, flowing rounded or dotted modules, with square, rounded or circular corner eyes, any colors (tokens included) and a configurable quiet zone. A centered logo sits on a cleared plate and raises the error correction to H on its own. Exports the encoder, an SVG string builder and a PNG download helper.
The import and the props worth knowing about, in one place.
import { QrCode, downloadQrPng } from "@/components/beste/component/qr-code";
<QrCode value="https://beste.co" />
<QrCode
value="https://beste.co/tickets/4F7Q"
moduleStyle="rounded" // "square" | "rounded" | "dots"
finderStyle="circle" // "square" | "rounded" | "circle"
ecc="Q" // "L" | "M" | "Q" | "H"
color="var(--primary)"
size="lg" // "sm" | "default" | "lg" | pixels
logo={{ src: "/logo.svg", size: 0.22 }}
/>
// Save it as a PNG, tokens resolved against the page
<button onClick={() => downloadQrPng("https://beste.co", { fileName: "beste" })}>Download</button>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
value* | string | — | The text or URL to encode. Encoded as UTF-8 bytes. |
ecc | "L" | "M" | "Q" | "H" | "M" | Error correction level. A logo raises it to H automatically. |
moduleStyle | "square" | "rounded" | "dots" | "square" | |
finderStyle | "square" | "rounded" | "circle" | "square" | |
color | string | "currentColor" | Dark module color. Any CSS color, tokens included. |
background | string | "transparent" | Light module color, drawn behind the whole code including the quiet zone. |
quietZone | number | 2 | Light border around the code, in modules. The standard asks for 4; 2 reads reliably on screens with good contrast around it. |
logo | QrLogo | — | An image centered on the code, over a cleared plate. |
size | Size | number | — | Rendered width: a preset or pixels. @defaultValue "default" |
tone | "muted" | "outline" | "ghost" | "muted" | |
title | string | — | Accessible name. Defaults to "QR code for" plus the value. |
className | string | — |