QR Code

A customizable QR code component with styling options for Delta applications.

Preview

Code

Installation

CLI

Manual

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

import QRCode from "@/components/ui/qrcode"
 
export default function Example() {
  return <QRCode value="https://example.com" size={200} />
}

Preview

Code

Add a logo to the center of your QR code using the logoImage prop:

Preview

Code

<QRCode
  value="https://example.com"
  logoImage="https://example.com/logo.png"
  logoSize={0.25}
  logoMargin={4}
  level="H"
  size={200}
/>

When enableNavigation is set to true, the QR code becomes clickable and will open the encoded URL in a new tab:

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

Prop	Type	Default	Description
value	string	-	The data to encode in the QR code (required)
size	number	200	Width and height of the QR code in pixels
bgColor	string	"--color-background"	Background color (CSS variable or color value)
fgColor	string	"--color-foreground"	Foreground color (CSS variable or color value)
level	"L" \| "M" \| "Q" \| "H"	"M"	Error correction level
marginSize	number	0	Margin size around the QR code
className	string	-	Additional CSS classes
enableNavigation	boolean	false	Enable click navigation to open the QR code URL in a new tab
dotStyle	"rounded" \| "dots" \| "classy" \| "classy-rounded" \| "square" \| "extra-rounded"	"square"	Style of the QR code dots
cornerSquareStyle	"dot" \| "square" \| "extra-rounded" \| "rounded" \| "dots" \| "classy" \| "classy-rounded"	"square"	Style of the corner squares
cornerDotStyle	"dot" \| "square" \| "rounded" \| "dots" \| "classy" \| "classy-rounded" \| "extra-rounded"	"square"	Style of the corner dots
logoImage	string	-	URL or data URI for the logo image to display in the center
logoSize	number	0.2	Size of the logo as a percentage of the QR code size (0-1)
logoMargin	number	0	Margin around the logo in pixels

On This Page

Build Better User Experiences

Discover open source components that make the difference in your applications. Copy, paste, and customize to create exceptional user interfaces.