QR

Import

import { QR } from '@delightstack/components';

Basic Usage

View code

<QR value="https://example.com" />

Examples

Custom Size and Colors

View code

<QR
  value="https://example.com"
  size={250}
  foreground="oklch(0.3 0.1 250)"
  background="oklch(0.95 0.02 250)"
/>

Rounded Modules

View code

<QR
  value="https://example.com"
  rounded
/>

Logo Overlay

When a logo is provided, the error correction level is automatically upgraded to 'H' to ensure scannability despite covered modules.

<QR
  value="https://example.com"
  logo="/logo.png"
  logo_size={0.25}
/>

High Error Correction

Use level 'H' for environments where the QR code may be partially obscured or damaged.

View code

<QR value="https://example.com" level="H" />

Downloadable

The QR component exposes a triggerDownload(filename?) method so consumers can wire up their own download button.

Download PNG

View code

<script>
  let qr_ref = $state(undefined);
</script>

<QR bind:this={qr_ref} value="https://example.com" download_filename="my-share-code" />
<Button outline onclick={() => qr_ref.triggerDownload()}>Download PNG</Button>

Skeleton Loading

Show loaded

View code

<QR skeleton value={loading ? undefined : 'https://thedelight.co'} size={200} />

Props

Prop	Type	Default	Description
value	string	-	Data to encode (URL, text, etc.). May be assigned later — pair with skeleton to show a placeholder until it arrives
size	number	200	Size in pixels (width and height)
level	'L' | 'M' | 'Q' | 'H'	'M'	Error correction level
foreground	string	'#000000'	Module (dark) color
background	string	'#ffffff'	Background (light) color
margin	number	4	Quiet zone in modules around the QR code
logo	string	-	Center logo image URL
logo_size	number	0.25	Logo size as a fraction of QR size (0 to 1)
rounded	boolean	false	Round module corners
downloadable	boolean	false	Show a download button
download_filename	string	'qr-code'	Filename for the downloaded PNG (without extension)
skeleton	boolean	false	Show a skeleton while value is not yet available; it dismisses itself as soon as the code renders
id	string	auto	Element ID
class	string	''	Additional CSS classes

Error Correction Levels

Level	Recovery	Use Case
L	~7%	Clean environments, maximum data capacity
M	~15%	General use (default)
Q	~25%	Moderate damage expected
H	~30%	Required when using logo overlay, harsh environments

Accessibility

• SVG element has role="img" with an aria-label describing the encoded content (e.g., “QR code for https://example.com”)
• Download button has aria-label="Download QR code as PNG"
• Skeleton state has aria-label="Loading QR code"
• Respects prefers-reduced-motion for shimmer animations