QrCode

QR codes are two-dimensional barcodes that can store various types of data and be scanned by devices to quickly access information.

Use QR codes to provide quick access to URLs, contact information, or other data that users can scan with their mobile devices.

View in StorybookView in Playroom

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { QrCode } from '@adaptavant/eds-core';

Sizes​

The QrCode component is available in 3 sizes: 64px, 120px (default), and 160px.

<Box className="flex flex-col gap-4 md:flex-row">
  {/* Small - 64px */}
  <QrCode value="https://setmore.com" size={64} />

  {/* Medium - 120px (default) */}
  <QrCode value="https://setmore.com" size={120} />

  {/* Large - 160px */}
  <QrCode value="https://setmore.com" size={160} />
</Box>
View in Playroom

Error Correction Levels​

Error correction levels determine how much of the QR code can be damaged while still being readable. Higher levels provide more redundancy but create denser patterns.

<Box className="flex flex-col gap-4 md:flex-row">
  {/* Low (7%) - Default */}
  <QrCode value="https://setmore.com" errorLevel="L" />

  {/* Medium (15%) */}
  <QrCode value="https://setmore.com" errorLevel="M" />

  {/* Quartile (25%) */}
  <QrCode value="https://setmore.com" errorLevel="Q" />

  {/* High (30%) */}
  <QrCode value="https://setmore.com" errorLevel="H" />
</Box>
View in Playroom

Note:QR Code Character Limits by Error Correction Level (Alphanumeric, Version 40)

Error Correction LevelMax Alphanumeric Characters
L (Low, ~7% recovery)4,296
M (Medium, ~15%)3,391
Q (Quartile, ~25%)2,581
H (High, ~30%)1,853
  • L (Low): Maximum data capacity, minimal error correction.
  • M (Medium): Moderate data capacity and error correction.
  • Q (Quartile): Higher error correction, reduced data capacity.
  • H (High): Maximum error correction, lowest data capacity.

Content Types​

QR codes can encode various types of content including URLs, emails, phone numbers, and plain text.

<Box className="flex flex-col gap-4 md:flex-row">
  {/* Website URL */}
  <QrCode value="https://setmore.com" />

  {/* Email address */}
  <QrCode value="mailto:support@setmore.com" />

  {/* Phone number */}
  <QrCode value="tel:+1234567890" />

  {/* Plain text */}
  <QrCode value="Hello, World!" />
</Box>
View in Playroom

API Reference​

QR Code

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.

QrCode parts​

The QrCode component exposes three StyleProps parts for granular styling control:

  • root: The outer container element
  • frame: The SVG element that contains the QR code
  • qrCode: The path element that renders the QR pattern
<QrCode 
  value="https://setmore.com"
  className="border-2 border-accent rounded-lg p-4"
  classNames={{
    frame: 'bg-neutral border border-tertiary rounded',
    qrCode: 'fill-positive opacity-90'
  }}
/>
View in Playroom

Style inheritance: The qrCode part uses fill="currentColor" by default, allowing color inheritance from CSS classes or the parent element's text color.