Renders a QR code as crisp, scalable SVG. Encodes any text (byte mode, UTF-8) with a self-contained generator — no runtime dependencies. Choose a module style with variant, theme it with CSS custom properties, and drop a logo into the center via the default slot.
The variant attribute changes how modules are drawn — square (default),
rounded, or dots. (The demos below set explicit colors so they stay crisp
in both light and dark; by default the module color follows your theme.)
For a simple text monogram, set the logo attribute — the badge is styled
for you (defaults to the module color, white text, rounded), tunable via CSS
variables. For a custom image, slot an <img> instead. Always pair either with
error-correction="H" so the code stays scannable behind the overlay.
Error-correction level (higher tolerates more damage / occlusion)
label
—
string
''
Accessible label (defaults to the encoded value)
logo
—
string
''
Short monogram (e.g. "N") rendered as a styled center badge automatically. Prefer this over the slot for simple text logos.
margin
—
number
4
Quiet-zone width, in modules
size
—
number
160
Rendered size in pixels (width and height)
value
—
string
''
The data to encode
variant
—
QrCodeVariant
'square'
Module shape style
Slots
Slot
Description
(default)
Optional center logo / overlay (e.g. an `<img>`). Use a high `error-correction` level so the code stays scannable. For a simple monogram, use the `logo` attribute instead — the badge is styled for you.
CSS parts
Part
Description
::part(frame)
The bordered background frame
::part(svg)
The SVG element
::part(modules)
The `<path>` of dark modules
::part(logo)
The center logo/monogram container
CSS custom properties
Property
Description
--nana-qr-foreground
Module colour
--nana-qr-background
Background / quiet-zone colour
--nana-qr-radius
Frame corner radius
--nana-qr-logo-size
Logo width / monogram tile size (default 22% / 2.25rem)
--nana-qr-logo-bg
Monogram tile background (default: the module colour)
