A flexible QR code generator with theme integration, custom styling, error handling, and loading states built with the qrcode library.
Overview
The QR Code component bridges physical and digital experiences by generating scannable codes that connect users to websites, contact information, or any digital content. It features automatic theme integration and error handling, making it essential for marketing materials, business cards, and any application requiring quick digital access. Perfect for improving user onboarding and reducing friction in offline-to-online conversion funnels.
Installation
pnpm dlx shadcn@latest add https://deltacomponents.dev/r/qr-code.json
Usage
import QRCode from "@/registry/media/qr-code"
export function Component() {
return (
<QRCode
value="https://deltacomponents.dev"
size={200}
bgColor="--color-card"
fgColor="--color-card-foreground"
/>
)
}API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | The data to encode in the QR code (required) |
size | number | 200 | Size of the QR code in pixels |
bgColor | string | "--color-card" | Background color (CSS variable or color value) |
fgColor | string | "--color-card-foreground" | Foreground color (CSS variable or color value) |
errorCorrectionLevel | "L" | "M" | "Q" | "H" | "M" | Error correction level |
margin | number | 4 | Margin around the QR code |
className | string | "" | Additional CSS classes for the canvas |
containerClassName | string | "" | Additional CSS classes for the container |
Examples
Custom Styling
QR codes with custom colors and enhanced visual styling.
Primary Theme
Destructive Theme
Muted Theme
Custom Border
Reactive QR Code
Interactive QR code generation with real-time input and preview.
Reactive Dark Mode QR Code
This QR code automatically adapts to light and dark themes
Uses --color-background and --color-foreground for automatic theme adaptation
