QR Code
A QR code, drawn as vector, encoded here.
Walkthrough
1. Basic
One attribute. The encoder is in the component, so there is no dependency and no network call, and the output is SVG — sharp at any size and at the printer's resolution rather than the screen's.
<script lang="ts"> import { QrCode } from 'omaris'; let value = $state('https://omaris.dev');</script><div class="flex w-full flex-col items-center gap-4"> <QrCode {value} variant="card" size={188} caption="Scan me" /> <input bind:value class="w-full max-w-xs rounded-shape-sm border border-border bg-surface-container-lowest px-3 py-2 text-sm text-foreground outline-none focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-ring" aria-label="What the code says" /></div>2. Styles
shape draws the modules, eyes the three corners, and gradient paints them. fluid rounds only the corners nothing joins, so a run of modules reads as one stroke. None of it changes what the code says.
<script lang="ts"> import { QrCode } from 'omaris';</script><div class="flex w-full flex-wrap items-end justify-center gap-4"> <QrCode value="https://omaris.dev" size={124} variant="card" caption="square" /> <QrCode value="https://omaris.dev" shape="dot" eyes="circle" size={124} variant="card" caption="dot" /> <QrCode value="https://omaris.dev" shape="fluid" eyes="leaf" gradient={{ from: 'var(--color-primary)', to: 'var(--color-tertiary)', angle: 45 }} size={124} variant="card" caption="fluid" /></div>3. Payloads
A QR code is only ever text; what makes a phone offer to join a network rather than run a search is the shape of that text. qrWifi, qrVcard, qrTel, qrEmail, qrGeo, qrSms and qrCalendar build those shapes, escaping included — a missing semicolon in a Wi-Fi payload scans perfectly and does nothing.
<script lang="ts"> import { QrCode, qrGeo, qrVcard, qrWifi } from 'omaris';</script><div class="flex w-full flex-wrap items-end justify-center gap-4"> <QrCode value={qrWifi({ ssid: 'Omaris Guest', password: 'hunter2' })} size={132} variant="card" caption="Join the Wi-Fi" /> <QrCode value={qrVcard({ name: 'Ada Lovelace', organisation: 'Analytical Engines', email: 'ada@example.com', phone: '+15550100' })} size={132} variant="card" caption="Save the contact" /> <QrCode value={qrGeo(36.19, 44.01)} size={132} variant="card" caption="Open the map" /></div>4. Logo and download
A logo is damage: it covers modules, so level rises to H on its own when one is set. Keep logoSize under 0.3 and the code still reads. bind:this gives download(), toDataURL() and toBlob(), with the theme's colours resolved — what is saved is what was on screen.
<script lang="ts"> import { Button, QrCode } from 'omaris'; let code = $state<QrCode | null>(null); const MARK = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent( '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><rect width="48" height="48" rx="12" fill="%230a84ff"/><path d="M14 30l10-14 10 14z" fill="white"/></svg>' );</script><div class="flex w-full flex-col items-center gap-4"> <QrCode bind:this={code} value="https://omaris.dev" logo={MARK} shape="fluid" eyes="rounded" size={196} variant="card" /> <div class="flex gap-2"> <Button size="sm" variant="tonal" onclick={() => code?.download('omaris', 'image/png')}> Download PNG </Button> <Button size="sm" variant="outlined" onclick={() => code?.download('omaris', 'image/svg+xml')}> Download SVG </Button> </div></div>5. Overridden
Every part is reachable: classes names the frame and the caption, class still covers the root, and the code's own colours are props rather than classes so the SVG keeps them when it is exported.
<script lang="ts"> import { QrCode } from 'omaris';</script><div class="flex w-full justify-center"> <QrCode value="https://omaris.dev/docs/components/qr-code" shape="fluid" eyes="leaf" size="13rem" margin={2} background="transparent" color="var(--color-primary)" pupilColor="var(--color-tertiary)" caption="A code that matches the page" class="rounded-shape-xl bg-primary-container p-4" classes={{ caption: 'text-primary-container-foreground' }} /></div>