QR Code
Generate QR codes from any string value — URLs, contact info, authentication tokens, Wi-Fi credentials, and more. Rendered entirely in SVG with no external dependencies.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <QrCode />
Tested
Tier 1 · Render + props
all components → Render Behavior A11y Keyboard Scale E2E
13 tests across 1 file. Auto-generated from the test suite.
When to Use
- Sharing URLs or deep links that users can scan from a mobile device
- Payment codes for invoices, checkout pages, or donation links
- App download links pointing to an app store listing
- Contact information encoded as vCard for easy sharing
https://lumeo.nativ.sh/
Low (~7%)
Medium (~15%)
Quartile (~25%)
High (~30%)
Higher correction means a denser QR code but greater fault tolerance.
Medium
Recovers ~15% of data
White on primary
Default (theme-aware)
With quiet zone
No margin
Screen readers announce the friendly label instead of the raw URL.
80px
120px
180px
API Reference
QRCode
| Prop | Type | Default | Description |
|---|---|---|---|
| Value | string? | — | The payload to encode (URL, text, etc). Nothing renders (an empty transparent box) while this is null/whitespace or fails to encode. |
| Size | int | 200 | Rendered width/height of the code in pixels (the SVG scales to fill this box). Default 200. |
| ErrorCorrectionLevel | QRErrorLevel | QRErrorLevel.Medium | Reed-Solomon error-correction level — higher levels tolerate more damage but produce a denser code. Default Medium (~15% recovery). |
| ForegroundColor | string | "currentColor" | Fill color of the dark modules. Default "currentColor" (inherits the surrounding text color). |
| BackgroundColor | string | "transparent" | Fill color of the light modules/background. Default "transparent". |
| IncludeMargin | bool | true | Keeps the generator's built-in 4-module quiet-zone border around the code. Default true; set false to strip it and fill the box edge to edge. |
| ImageSrc | string? | — | Optional logo image URL overlaid at the center of the code. Combine with a high ErrorCorrectionLevel so the code stays scannable. |
| ImageSize | int | 40 | Size of the center ImageSrc overlay, in pixels of the rendered Size box. Default 40. |
| AriaLabel | string? | — | Override the accessible label announced for the QR code. Defaults to "QR code: {Value}". Useful when the encoded payload is a long URL or technical string the user doesn't need read out — pass a human-friendly description instead. |
| Class | string? | — | Additional CSS classes merged onto the root div. |
| AdditionalAttributes | Dictionary<string, object>? | — | Unmatched attributes splatted onto the root div. |