# QR Code

Source: https://lumeo.nativ.sh/components/qr-code

# 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

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<QrCode />

## 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

Preview Code

Basic QR Code

https://lumeo.nativ.sh/

Preview Code

Dynamic Value

Preview Code

Error Correction Levels

Low (~7%)

Medium (~15%)

Quartile (~25%)

High (~30%)

Preview Code

Error Correction Level (interactive)

Higher correction means a denser QR code but greater fault tolerance.

Low Medium Quartile High

Medium

Recovers ~15% of data

Preview Code

Custom Colors

White on primary

Default (theme-aware)

Preview Code

Different Sizes

80px

120px

180px

## API Reference

### QRCode

Property

Type

Default

Description

Value

string?

—

The text or URL to encode in the QR code.

Size

int

200

Width and height of the QR code in pixels.

ErrorCorrectionLevel

QRErrorLevel

Medium

Error correction capability: Low (~7%), Medium (~15%), Quartile (~25%), High (~30%).

ForegroundColor

string

currentColor

Color of the QR modules (pixels).

BackgroundColor

string

transparent

Background color of the QR code.

IncludeMargin

bool

true

Add quiet zone margin around the QR code.

ImageSrc

string?

—

URL of a logo image to embed at the center of the QR code.

ImageSize

int

40

Size of the center image in pixels.

## Related Components

-   [Image](/components/image) — Display raster images with preview and lazy loading
-   [Card](/components/card) — Wrap a QR code with context in a card layout
-   [Dialog](/components/dialog) — Show a QR code in a modal for focused scanning