QR Code

Display

Dependency-free SVG QR code generator. Implements ISO 18004 standard versions 1–6, ECC level L (up to 134 bytes).

Playground

Controls

Value

Size (px)

Quiet zone

Foreground

Label

Prop	Type	Default	Description
`value`*	`string`	—	Text/URL to encode (max 134 bytes for V6-L).
`size`	`number`	`200`	Rendered SVG size in pixels.
`moduleSize`	`number`	`8`	Size of each module (cell) in px.
`foreground`	`string`	`"currentColor"`	Color of dark modules.
`background`	`string`	`"transparent"`	Background color.
`quiet`	`number`	`2`	Quiet zone size (modules).
`label`	`string`	—	Text displayed below the QR code.

URL

dds.dev

vue

<DsQRCode
  value="https://dds.dev"
  :size="160"
  label="dds.dev"
/>

Short text

vue

<DsQRCode
  value="Hello, DDS!"
  :size="160"
/>

Custom colors

vue

<DsQRCode
  value="DDS Design"
  :size="160"
  foreground="#7f00ff"
  background="#f0e6ff"
/>

Use DsQRCodeSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsQRCodeSkeleton />

NumberTicker

Avatar