Data

QRCode

Real QR code renderer (byte mode, versions 1-10) drawn as a single SVG path, with error correction levels, custom colors and an optional quiet zone.

Import

import { QRCode } from "@zephora/react";

Examples

Basic

<QRCode value="https://zephora.dev" />

Level, margin and colors

Higher error-correction levels survive more damage at the cost of density. `includeMargin` adds the 4-module quiet zone scanners expect.

<QRCode value="https://zephora.dev" level="H" size={160} includeMargin />
<QRCode
  value="https://zephora.dev"
  size={160}
  color="#4f46e5"
  backgroundColor="#eef2ff"
  includeMargin
/>

API

QRCode props

Prop	Type	Default	Description
`value` *	`string`	—	Text encoded into the symbol.
`size`	`number`	`128`	Rendered size in px.
`level`	`"L" \| "M" \| "Q" \| "H"`	`"M"`	Error correction level.
`color`	`string`	—	Dark module color. Defaults to the theme foreground.
`backgroundColor`	`string`	—	Background color. Defaults to the theme background.
`includeMargin`	`boolean`	`false`	Adds the 4-module quiet zone around the symbol.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.