Components / Data & content

QR Code

Component + manager

Generates a stylized QR code with optional image in the center, supporting download and copying features.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentQr

Managercreate_qr_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { Qr, create_qr_manager } from "sveltekit-ui"

  const manager = create_qr_manager({
    data: "https://svelte.dev",
    size: 180,
    margin: 8,
    is_show_copy: true,
    is_show_download: true,
  })
</script>

<Qr {manager} />

API reference

Configure the manager, call its methods, and read its reactive state.

17 entries in configuration

Property	Type	Default	Description
`data`	`string`	`null`	The primary data/content encoded within the QR code.
`image`	`string or null (URL)`	`null`	Optional image URL to place in the center of the QR code.
`image_size`	`number`	`0.5`	How large the center image is as a fraction of overall QR size (0.5 means 50%).
`size`	`number`	`200`	Width/height in px for the QR code.
`margin`	`number`	`10`	Margin in px around the QR code.
`type_number`	`number`	`0`	Integer (0-40) specifying detail level of QR. 0 means auto, higher means more capacity but bigger code.
`error_correction_level`	`string`	`Q`	Amount of error correction. 'L' ~7%, 'M' ~15%, 'Q' ~25%, 'H' ~30%. Higher can handle more damage but uses bigger code.
`color`	`string (CSS color)`	`var(--primary-t)`	Main dots color of the QR code.
`corner_color`	`string (CSS color)`	`color-mix(in oklab, var(--primary-t), var(--bg) 20%)`	Special color for the larger 'corner squares' in the QR code.
`background_color`	`string (CSS color)`	`var(--shadow1-t)`	Background fill behind the QR code (the 'negative space' inside the bounding square).
`border_color`	`string (CSS color)`	`var(--shadow7-t)`	Border color of the QR container.
`border_width`	`number`	`1`	Width in px of the QR container border.
`border_radius`	`number`	`(size + 2 * margin) / 100`	Border radius (in rem or direct numeric) for the QR container.
`extension`	`string`	`svg`	File type for the download if is_show_download is true.
`quality`	`number (0.0 to 1.0)`	`0.8`	Used when downloading as raster formats like png or webp to specify image quality.
`is_show_copy`	`boolean`	`false`	If true, displays a text input of `data` plus a button to copy it to clipboard.
`is_show_download`	`boolean`	`false`	If true, shows a dropdown to pick file extension and a button to download the generated QR.