QR Code

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/qrcode.json

Usage

The QR code component uses qr-code-styling and automatically syncs with your shadcn/ui theme variables. It supports CSS variables for colors, making it theme-aware out of the box.

Copy
import QRCode from "@/components/ui/qrcode"
 
export default function Example() {
  return (
    <QRCode
      value="https://deltacomponents.dev"
      size={200}
      dotStyle="rounded"
    />
  )
}

Examples

Styles Variations

Customize the dots, corner squares, and corner dots independently to match your brand identity.

With Logo

Embed a logo in the center. The component automatically clears dots behind the logo to maintain scannability.

Clickable Navigation

Enable navigation to make the QR code clickable, opening the URL in a new tab. Includes keyboard accessibility support.

Copy
<QRCode
  value="https://example.com"
  enableNavigation={true}
  size={200}
/>

Notes

Theme Awareness

This component uses a resolveColor helper that accepts CSS variables (e.g., --color-background) or direct color values (e.g., #ffffff). When CSS variables are provided, the component resolves them by reading computed styles from document.documentElement.

A MutationObserver watches for changes to the class and data-theme attributes on the document element, automatically updating the QR code when your theme switches. This ensures the QR code remains readable immediately after a theme toggle without requiring a page refresh.

Error Correction Levels

The level prop controls how much data can be recovered if the QR code is damaged or obscured. Use higher levels when adding logos or when the code might be printed on textured surfaces:

• "L" (Low): ~7% recovery - Use for simple QR codes without logos
• "M" (Medium): ~15% recovery - Default for general use
• "Q" (Quartile): ~25% recovery - Recommended when adding small logos
• "H" (High): ~30% recovery - Use for large logos or when maximum durability is needed

When using logoSize above 0.2, always use level="Q" or level="H" to maintain scannability.

Logo Best Practices

When embedding logos:

• Keep logoSize between 0.15 and 0.25 for optimal balance between branding and scannability
• Use logoMargin to add padding around the logo (typically 4-8 pixels)
• Increase error correction level to "Q" or "H" when logo is present
• Test scannability with multiple QR code readers before deployment

Empty State

When no value is provided, the component renders an animated placeholder with a dashed border. This is useful for loading states or form previews.

Keyboard Accessibility

When enableNavigation is enabled, the QR code becomes a focusable button supporting both Enter and Space keys for activation. It also includes proper ARIA roles for screen reader support.

API Reference

Props