QR Code
A server-side QR code component powered by the goQR.me API. Renders a plain <img> — no JavaScript library required.
Basic
Pass any string to value — a URL, plain text, email, phone number, or vCard.
<x-ui::qr-code value="https://example.com" />Sizes
Control the pixel dimensions with the size prop. Default is 160.
120px
160px (default)
220px
<x-ui::qr-code value="https://example.com" :size="120" />
<x-ui::qr-code value="https://example.com" :size="160" />
<x-ui::qr-code value="https://example.com" :size="220" />Colors
Use color for the foreground and background for the background. Accepts any hex value.
Brand blue
Dark
{{-- Brand blue --}}
<x-ui::qr-code
value="https://example.com"
color="#1e40af"
background="#eff6ff"
/>
{{-- Dark --}}
<x-ui::qr-code
value="https://example.com"
color="#ffffff"
background="#1f2937"
/>Error Correction
Higher levels keep the code scannable even when partially covered. Use H when overlaying a logo on the QR code.
L
~7% recovery
M
~15% recovery
Q
~25% recovery
H
~30% recovery
{{-- L: recovers ~7% of data --}}
<x-ui::qr-code value="https://example.com" error-correction="L" />
{{-- M: recovers ~15% — default --}}
<x-ui::qr-code value="https://example.com" error-correction="M" />
{{-- Q: recovers ~25% --}}
<x-ui::qr-code value="https://example.com" error-correction="Q" />
{{-- H: recovers ~30% — use when overlaying a logo --}}
<x-ui::qr-code value="https://example.com" error-correction="H" />Card Wrapper
Adding title or description wraps the QR code in a bordered card with a text block below.
Scan to visit
Point your camera at this code to open the link.
<x-ui::qr-code
value="https://example.com"
title="Scan to visit"
description="Point your camera at this code to open the link."
/>States
Use state="loading" or state="expired" to overlay a status indicator. Useful when the QR value is fetched asynchronously or has a TTL.
loading
expired
{{-- Loading --}}
<x-ui::qr-code value="https://example.com" state="loading" />
{{-- Expired --}}
<x-ui::qr-code value="https://example.com" state="expired" />Copyable
Set :copyable="true" to render a readonly input with a one-click copy button below the QR code.
<x-ui::qr-code
value="https://example.com"
:copyable="true"
/>Downloadable
Set :downloadable="true" to show a download button that saves the QR code as a PNG. Both props can be combined.
<x-ui::qr-code
value="https://example.com"
title="Download or share"
:copyable="true"
:downloadable="true"
/>Livewire
Because the QR code is a server-rendered <img>, Livewire's re-render cycle automatically regenerates it whenever a bound property changes.
// Livewire component
public string $url = 'https://example.com';
// Template
<x-ui::input wire:model.live="url" placeholder="Enter a URL or text..." />
<x-ui::qr-code :value="$url" :copyable="true" />