Data

TwQrCode

TwQrCode is a Blazor QR code component with no third-party dependencies. Set Value, ErrorCorrection, Size and QuietZone, or build codes with ITwQrCodeService.

Last updated 16 October 2026

Please be aware this component is new, may have bugs and/or be subject to change. Please report any bugs at https://github.com/twblazor/twblazor/issues.

Basic usage

Give TwQrCode a Value, such as a URL, and it draws a QR code for it. The code is a single SVG path, so it stays sharp at any size.

RAZOR

<TwQrCode Id="basic-qr-code" Value="https://twblazor.com" />

Live value

The code is only rebuilt when the Value or an encoding setting changes, so it is cheap to bind to an input. Nothing is drawn while the value is empty or too long to fit.

Text to encode

RAZOR

<div class="flex flex-wrap items-center gap-6">
    <TwQrCode Id="live-qr-code" Value="@liveValue" />
    <div class="min-w-64 flex-1">
        <TwTextfield Label="Text to encode" @bind-Value="liveValue" BindEvent="oninput" />
    </div>
</div>

CSHARP

@code {
    private string liveValue = "https://twblazor.com";
}

Error correction

QR codes carry extra recovery data, so they still scan when part of the code is dirty, damaged or covered. ErrorCorrection sets how much: Low recovers about 7% of the code, Medium (the default) about 15%, Quartile about 25% and High about 30%. More recovery data means a denser code for the same text. Use Medium on screens, and Quartile or High for printed codes that may get worn. By default the level is raised for free whenever that does not make the code any denser; set BoostErrorCorrection="false" to keep exactly the level you chose.

Low

Medium

Quartile

High

RAZOR

<div class="flex flex-wrap items-end gap-6">
    @foreach (var level in Enum.GetValues<QrErrorCorrection>())
    {
        <figure class="flex flex-col items-center gap-2">
            <TwQrCode Id="@($"error-correction-{level.ToString().ToLowerInvariant()}")" Value="https://twblazor.com/qr-code" ErrorCorrection="@level" BoostErrorCorrection="false" Size="QrCodeSize.Small" />
            <figcaption class="text-sm">@level</figcaption>
        </figure>
    }
</div>

Sizes

Use Size to set the dimensions. Every module scales with it, so a longer value packs smaller modules into the same space; give dense codes more room so they are easy to scan.

RAZOR

<div class="flex flex-wrap items-end gap-6">
    <TwQrCode Id="small-qr-code" Value="https://twblazor.com" Size="QrCodeSize.Small" />
    <TwQrCode Id="medium-qr-code" Value="https://twblazor.com" Size="QrCodeSize.Medium" />
    <TwQrCode Id="large-qr-code" Value="https://twblazor.com" Size="QrCodeSize.Large" />
    <TwQrCode Id="extra-large-qr-code" Value="https://twblazor.com" Size="QrCodeSize.ExtraLarge" />
</div>

Quiet zone and shape

Scanners find a code by the plain margin around it, called the quiet zone. QuietZone sets it in modules and defaults to 4, the minimum the standard asks for. Only reduce it when the code already sits on a plain light background. Rounded and Shadow style the outer edge.

RAZOR

<div class="flex flex-wrap items-end gap-6">
    <TwQrCode Id="quiet-zone-default" Value="https://twblazor.com" Size="QrCodeSize.Small" />
    <TwQrCode Id="quiet-zone-two" Value="https://twblazor.com" Size="QrCodeSize.Small" QuietZone="2" Rounded="Rounded.Lg" Shadow="Shadow.Md" />
</div>

Describing the code

By default the code is announced as "QR code: " followed by its value. Set AriaLabel to say what scanning it does instead, and always show the link or text beside the code, so people without a camera can use it too.

Scan to read the guide, or go to twblazor.com/get-started.

RAZOR

<div class="flex flex-wrap items-center gap-4">
    <TwQrCode Id="described-qr-code" Value="https://twblazor.com/get-started" AriaLabel="QR code that opens the TwBlazor get started guide" Size="QrCodeSize.Small" />
    <p class="text-sm">Scan to read the guide, or go to <TwLink Href="/get-started">twblazor.com/get-started</TwLink>.</p>
</div>

Colors and dark mode

The modules are drawn in the current text color over a background, both set by Foreground and Background in TwQrCodeTheme, the same settings the barcode uses. By default the code is black on white, and in dark mode it turns light on the page's own background. Most phone camera apps read these inverted symbols, but some dedicated scanners do not: to keep a code dark on light in dark mode, set Background to bg-white and Foreground to text-black in your theme, or override a single code with Class. Whatever colors you choose, keep strong contrast between them.

RAZOR

<div class="flex flex-wrap items-end gap-6">
    <TwQrCode Id="default-colors-qr-code" Value="https://twblazor.com" Size="QrCodeSize.Small" />
    <TwQrCode Id="always-light-qr-code" Value="https://twblazor.com" Size="QrCodeSize.Small" Class="dark:bg-white dark:text-black" />
    <TwQrCode Id="brand-colors-qr-code" Value="https://twblazor.com" Size="QrCodeSize.Small" Class="bg-purple-50 text-purple-900 dark:bg-transparent dark:text-purple-200" />
</div>

Using the service

ITwQrCodeService is registered by AddTwBlazor. Call it directly to build a code outside a component: Encode returns a QrMatrix of dark and light modules. Draw it with the shared SymbolSvg methods from TwBlazor.Services.Encoding, which draw barcodes too: ToSvg writes a standalone SVG for a file, an email or inline markup, ToSvgDataUri gives a download link or image source, and GetSvgPath gives the path data for your own markup. TryEncode tells you whether a value fits without throwing.

Version 3, 29 x 29 modules, Quartile error correction.

Download SVG

RAZOR

<div class="flex flex-wrap items-center gap-6">
    <div class="size-32">@((MarkupString)serviceSvg)</div>
    <div class="flex flex-col gap-2 text-sm">
        <p>Version @serviceMatrix.Version, @serviceMatrix.Size x @serviceMatrix.Size modules, @serviceMatrix.ErrorCorrection error correction.</p>
        <TwButton Href="@serviceDataUri" download="twblazor-qr-code.svg" Color="Color.Primary" Label="Download SVG" />
    </div>
</div>

CSHARP

@code {
    private const string serviceValue = "https://twblazor.com/qr-code";
    private QrMatrix serviceMatrix = null!;
    private string serviceSvg = string.Empty;
    private string serviceDataUri = string.Empty;
    
    protected override void OnInitialized()
    {
        serviceMatrix = QrCodeService.Encode(serviceValue, new QrEncodeOptions { ErrorCorrection = QrErrorCorrection.Quartile });
        var svgOptions = new SymbolSvgOptions { Title = $"QR code: {serviceValue}" };
        serviceSvg = serviceMatrix.ToSvg(svgOptions);
        serviceDataUri = serviceMatrix.ToSvgDataUri(svgOptions);
    }
}

Accessibility

A QR code is exposed as an image (role="img") named after the text it holds, or after AriaLabel or AriaLabelledBy when set, and it is not a Tab stop. Its colors opt out of forced colors mode (forced-color-adjust: none) because a recolored code may not scan. A code alone cannot be used by someone without a camera, so put the link or text it holds beside it.

Theme configuration

Styling is controlled by TwBlazorTheme.Components (a TwQrCodeTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`Base`	string
`Background`	string
`Foreground`	string
`Small`	string
`Medium`	string
`Large`	string
`ExtraLarge`	string

Full reference: TwQrCodeTheme on the API docs.

TwQrCode

Basic usage

Live value

Error correction

Sizes

Quiet zone and shape

Describing the code

Colors and dark mode

Using the service

Accessibility

Keyboard navigation

Theme configuration