Laravel QR Code Component
Free · MITA QR code drawn on the server, with something to read when you cannot scan it.
A QR Code built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4.
Server-rendered by default and dark-mode ready. Aura's solid-background and border colours are
contrast-tested against WCAG 2.1 AA/UI in CI, in both themes —
see what's covered.
Drop it in with a single Blade tag:
<x-aura::qr-code>
Installation
composer require bluestarsystem/aura-uiUsage
<x-aura::qr-code value="https://aura-ui.com" label="Aura UI" :size="180" />See the full API, props and live examples in the QR Code documentation.
Overview
<x-aura::qr-code> renders a QR code as inline SVG, on the server.
Two consequences worth having. There is no canvas script for a content security policy to block,
and the code is in the HTML rather than appearing a second after the page. And because the
encoded value is known at render time, it becomes the image's accessible name — a QR code shipped
as an unnamed <svg> or <canvas>, which is what most libraries produce, is nothing at all to a
screen reader, to a text browser, or to anyone whose camera will not focus.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value |
string |
'' |
What the code encodes. |
label |
string|null |
null |
The image's accessible name. Defaults to value. |
size |
int |
200 |
Pixels. Minimum 48 — below that a phone cannot resolve the modules. |
margin |
int |
1 |
The quiet zone, in modules. Scanners need it; zero often fails to read. |
showValue |
bool |
false |
Shows the value under the code, as a link when it is one. |
caption |
string|null |
null |
A caption under the code, when the value is not shown. |
See more examples and every variant in the QR Code documentation.