Components

QR Code

A client-side QR code generator rendered as a crisp, theme-aware SVG — no dependencies.

php artisan blatui:add qr-code

{{-- A QR code for a URL. Scan it with any phone camera. --}}
<x-ui.qr-code value="https://blatui.remix-it.com" />

Ecc

Low (~7%)

High (~30%)

{{-- Higher error-correction (ecc="H", ~30% recoverable) is denser but survives damage,
     logos and smudges — at the cost of more modules for the same data. --}}
<div class="flex flex-wrap items-end gap-8">
    <div class="flex flex-col items-center gap-2">
        <x-ui.qr-code value="https://blatui.remix-it.com" ecc="L" />
        <span class="text-muted-foreground text-xs">Low (~7%)</span>
    </div>
    <div class="flex flex-col items-center gap-2">
        <x-ui.qr-code value="https://blatui.remix-it.com" ecc="H" />
        <span class="text-muted-foreground text-xs">High (~30%)</span>
    </div>
</div>

Styled

{{-- A larger code with recoloured modules: the dark modules use currentColor, so a
     text-* utility on the component repaints them. Keep strong contrast so it stays
     scannable. --}}
<x-ui.qr-code
    value="https://blatui.remix-it.com"
    :size="220"
    ecc="Q"
    class="text-emerald-600 dark:text-emerald-400"
/>

API Reference

Props, slots and exposed methods for <x-ui.qr-code>.

Props

Prop	Type	Default	Description
`value`*	`string`	`''`	The text or URL to encode. Encoded in byte mode over UTF-8 with automatic version selection.
`size`	`int`	`160`	Rendered width and height of the code in pixels. The SVG scales crisply to this size.
`ecc`	`string`	`'M'`	Error-correction level. Higher levels (Q, H) survive more damage or overlay but produce a denser code. Invalid values fall back to M. `L` `M` `Q` `H`
`margin`	`int`	`4`	Quiet-zone width in modules around the code. 4 is the QR spec minimum needed for reliable scanning.
`alt`	`string`	—	Accessible label for the SVG (role="img"). Defaults to "QR code for {value}" when unset.

* Required.