Browse Components
QR Code
Share links and text with locally generated, scannable QR codes.
Basic
Scan to open the destination, or use the caption link.
View Code
<figure
class="qr-code"
data-qr-value="https://layoutui.com"
data-qr-label="Scan to open Layout UI"
>
<figcaption>
<a href="https://layoutui.com">
Open Layout UI
</a>
</figcaption>
</figure>Show on demand
Choose an anchored popover or a centered dialog with a larger QR code. Both open the same phone-reachable destination.
View Code
<div>
<div class="cluster">
<button
class="btn secondary"
type="button"
data-popover
popovertarget="share-qr-popover"
aria-haspopup="dialog"
aria-controls="share-qr-popover"
>
<span class="icon" aria-hidden="true" data-icon="qr-code">
</span>
Open Popover
</button>
<button
class="btn secondary"
type="button"
data-dialog-open="share-qr-dialog"
aria-haspopup="dialog"
aria-controls="share-qr-dialog"
>
<span class="icon" aria-hidden="true" data-icon="qr-code">
</span>
Open Dialog
</button>
</div>
<div
class="popover popup-panel"
id="share-qr-popover"
popover="auto"
role="dialog"
aria-labelledby="share-qr-title"
>
<div class="popover-content">
<h3 class="popover-view-heading" id="share-qr-title">
Open on your phone
</h3>
<p class="muted">
Scan with your phone’s camera.
</p>
<figure
class="qr-code qr-code-small mx-auto"
data-qr-value="https://layoutui.com"
data-qr-label="Scan to open Layout UI"
>
<figcaption>
<a href="https://layoutui.com">
Open Layout UI
</a>
</figcaption>
</figure>
<button class="btn secondary" type="button" data-popover-close>
Close
</button>
</div>
</div>
<dialog
class="dialog"
id="share-qr-dialog"
aria-labelledby="share-qr-dialog-title"
aria-describedby="share-qr-dialog-description"
data-dialog-dismiss
>
<header class="dialog-header">
<h2 id="share-qr-dialog-title">
Open on your phone
</h2>
</header>
<div class="dialog-body stack">
<p id="share-qr-dialog-description" class="muted">
Scan with your phone’s camera to open Layout UI.
</p>
<figure
class="qr-code qr-code-large mx-auto"
data-qr-value="https://layoutui.com"
data-qr-label="Scan to open Layout UI"
>
<figcaption>
<a href="https://layoutui.com">
Open Layout UI
</a>
</figcaption>
</figure>
</div>
<footer class="dialog-footer">
<button class="btn secondary" type="button" data-dialog-close autofocus>
Close
</button>
</footer>
</dialog>
</div>Sizes
Choose a size with enough room for the payload. Codes shrink to fit their container; verify scanning at the final size.
View Code
<div class="cluster items-start gap-lg">
<figure
class="qr-code qr-code-small"
data-qr-value="https://layoutui.com"
data-qr-label="Scan to open Layout UI"
>
<figcaption>
<a href="https://layoutui.com">
Small · 128px
</a>
</figcaption>
</figure>
<figure
class="qr-code "
data-qr-value="https://layoutui.com"
data-qr-label="Scan to open Layout UI"
>
<figcaption>
<a href="https://layoutui.com">
Default · 192px
</a>
</figcaption>
</figure>
<figure
class="qr-code qr-code-large"
data-qr-value="https://layoutui.com"
data-qr-label="Scan to open Layout UI"
>
<figcaption>
<a href="https://layoutui.com">
Large · 256px
</a>
</figcaption>
</figure>
</div>Higher error correction
High correction adds redundancy while retaining the full scanning border.
View Code
<figure
class="qr-code"
data-qr-correction="H"
data-qr-value="https://layoutui.com"
data-qr-label="Scan to open Layout UI"
>
<figcaption>
<a href="https://layoutui.com">
Open Layout UI
</a>
</figcaption>
</figure>Text
Encode plain text without turning it into a link. Unicode is encoded as UTF-8.
View Code
<figure
class="qr-code"
data-qr-value="Hello, world! 👋"
data-qr-label="Scan for the greeting"
>
<figcaption>
Hello, world! 👋
</figcaption>
</figure>Right-to-left
The caption follows reading direction; QR modules retain their encoded orientation.
View Code
<figure
class="qr-code"
dir="rtl"
lang="he"
data-qr-value="https://layoutui.com"
data-qr-label="סרקו לפתיחת האתר"
>
<figcaption>
<a href="https://layoutui.com">
פתיחת האתר
</a>
</figcaption>
</figure>