Delta Components

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, advanced dot styling, corner customization, 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

1import QRCode from "@/registry/media/qr-code"
2
3export function Component() {
4  return (
5    <QRCode
6      value="https://deltacomponents.dev"
7      size={200}
8      dotStyle="rounded"
9      cornerSquareStyle="extra-rounded"
10      cornerDotStyle="rounded"
11    />
12  )
13}

API Reference

Props

Examples

Advanced Styling

QR codes with advanced dot styling and corner customization.

Custom Colors

QR code with custom primary color styling.

Styling Options

Dot Styles

The dotStyle prop allows you to customize the appearance of the QR code data dots:

• square - Standard square dots (default)
• rounded - Rounded corner dots for a softer look
• dots - Circular dots for a modern appearance
• classy - Elegant curved dots
• classy-rounded - Combination of classy and rounded styles
• extra-rounded - Heavily rounded dots for maximum softness

Corner Square Styles

The cornerSquareStyle prop controls the appearance of the three positioning squares:

• square - Standard square corners (default)
• dot - Circular corner squares
• rounded - Rounded corner squares
• extra-rounded - Heavily rounded corner squares
• dots - Dotted corner squares
• classy - Elegant curved corner squares
• classy-rounded - Combination of classy and rounded corner styles

Corner Dot Styles

The cornerDotStyle prop customizes the dots inside the corner positioning squares:

• square - Standard square dots (default)
• dot - Circular dots
• rounded - Rounded corner dots
• dots - Multiple small dots
• classy - Elegant curved dots
• classy-rounded - Combination of classy and rounded dot styles
• extra-rounded - Heavily rounded dots

Theme Integration

The component automatically uses shadcn/ui theme colors by default, providing seamless integration with your design system:

Default Theme-Aware Behavior

By default, QR codes automatically adapt to light/dark themes:

1// Automatic theme adaptation (default behavior)
2<QRCode value="https://example.com" />
3// Background: --color-background
4// Foreground: --color-foreground

Custom Color Options

You can override the default colors with any CSS variable or color value:

1// Custom primary color
2<QRCode
3  value="https://example.com"
4  fgColor="--color-primary"
5/>
6
7// Custom background and foreground
8<QRCode
9  value="https://example.com"
10  bgColor="--color-card"
11  fgColor="--color-card-foreground"
12/>
13
14// Direct color values
15<QRCode
16  value="https://example.com"
17  bgColor="#ffffff"
18  fgColor="#000000"
19/>
20
21// Branded colors
22<QRCode
23  value="https://example.com"
24  bgColor="--color-muted"
25  fgColor="--color-primary"
26/>

Available Theme Variables

• --color-background / --color-foreground (default)
• --color-card / --color-card-foreground
• --color-primary / --color-primary-foreground
• --color-secondary / --color-secondary-foreground
• --color-muted / --color-muted-foreground
• --color-accent / --color-accent-foreground