Skip to content
Nana UI

QR Code

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.

Preview

Section titled “Preview”

Installation

Section titled “Installation”
Terminal window
npm install @nana-tec/ui-components

Import

Section titled “Import”
import "@nana-tec/ui-components/qr-code";

Basic usage

Section titled “Basic usage”
<nana-qr-code value="https://design.nanatec.co.ke"></nana-qr-code>

Module styles

Section titled “Module styles”

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.)

Theming

Section titled “Theming”

Override the colour tokens to brand the code. Keep strong contrast between foreground and background so it stays scannable.

Error correction

Section titled “Error correction”

Higher levels (Q, H) tolerate more damage or occlusion — required if you overlay a center logo.

Section titled “With a center logo”

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.

<!-- Monogram — styled automatically -->
<nana-qr-code value="https://nanatec.co.ke" logo="N" error-correction="H"></nana-qr-code>


<!-- Or slot a custom logo image -->
<nana-qr-code value="https://nanatec.co.ke" error-correction="H">
  <img src="/logo.svg" alt="Nanatec" />
</nana-qr-code>

API

Section titled “API”
PropertyTypeDefaultDescription
valuestring''The data to encode
sizenumber160Rendered size in pixels (width and height)
variant'square' | 'rounded' | 'dots''square'Module shape style
errorCorrection'L' | 'M' | 'Q' | 'H''M'Error-correction level (higher tolerates more damage / occlusion)
marginnumber4Quiet-zone width, in modules
labelstring''Accessible label (defaults to the encoded value)
logostring''Short monogram rendered as a styled center badge automatically

Slots

Section titled “Slots”
SlotDescription
(default)Optional center logo / overlay (e.g. an &lt;img>). Use a high error-correction level so the code stays scannable.

CSS Variables

Section titled “CSS Variables”
VariableDefaultDescription
--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)
--nana-qr-logo-color—Monogram text colour (default #fff)
--nana-qr-logo-radius—Monogram tile corner radius (default 0.5rem)

CSS Parts

Section titled “CSS Parts”
PartDescription
frameThe bordered background frame
svgThe SVG element
modulesThe <path> of dark modules
logoThe center logo / monogram container
Section titled “Related components”

Storybook

Section titled “Storybook”
Explore QR Code interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook