Examples

Common patterns

Copy-paste examples covering dot styles, corner styles, colors, logos, and export.

Default
QR code: https://example.com
tsx
<QRCode value="https://example.com" />
Rounded dots
QR code: https://example.com
tsx
<QRCode
  value="https://example.com"
  dotStyle="rounded"
  corner={{ square: { style: 'extra-rounded' } }}
/>
Circle dots
QR code: https://example.com
tsx
<QRCode
  value="https://example.com"
  dotStyle="circle"
  corner={{
    square: { style: 'circle' },
    dot: { style: 'circle' },
  }}
/>
Accent corners (single color)
QR code: https://example.com
tsx
<QRCode
  value="https://example.com"
  dotStyle="rounded"
  corner={{
    square: { style: 'extra-rounded', color: '#14b8a6' },
    dot: { color: '#14b8a6' },
  }}
/>
Transparent background
QR code: https://example.com
tsx
<QRCode
  value="https://example.com"
  dotStyle="rounded"
  dotColor="#ffffff"
  backgroundColor="transparent"
  corner={{ square: { style: 'extra-rounded' } }}
/>
With logo — ECL auto-picked
QR code: https://example.com
tsx
<QRCode
  value="https://example.com"
  dotStyle="rounded"
  corner={{ square: { style: 'extra-rounded' } }}
  logo={{
    src: 'https://avatars.githubusercontent.com/u/48100204?size=64',
    size: 0.5,
    margin: 2,
  }}
/>
Version 1 — numeric data
QR code: 12345
tsx
<QRCode
  value="12345"
  qr={{ version: 1, errorCorrectionLevel: 'L' }}
/>