QR Code

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

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

{{-- 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"
/>