QR Code Suite

A premium, dual-purpose QR Code component suite built for Next.js applications.

Whether you need to generate high-fidelity, customizable QR codes (with PNG/PDF download support) or allow users to upload and scan QR code images to extract embedded URLs, this suite has you covered.

Everything below runs client-side — type a new value and the SVG regenerates instantly. The generator and the reader are separate components with separate install commands.

QR generator

Type a value, pick an error-correction level, and export as PNG or PDF.

value: is the data or URL encoded into the code — required, despite defaulting to an empty string.

Color Variant

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install QR Code Generator

npx shadcn@latest add @algorize-ui/qr-code-generator

components/custom/blocks/QrCodeGeneratorBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs this for you. Run it yourself only if you are adding QR Code Generator to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

qrcode.react is an npm package.

npm install qrcode.react

More examples

Sizes & levels

size{128}: is the box in pixels; the output is SVG, so it stays crisp at any of them.
fgColor: colours the pattern and bgColor the backing — keep the contrast high or scanners fail.
level: sets redundancy: L, M, Q or H. Higher survives more damage but packs the pattern denser.

QR reader

A separate component with its own dependencies — decoding happens entirely in the browser.

QR reader

onRead: on QrCodeReader receives the decoded payload — the decode happens in the browser, nothing is uploaded.

Installation

Install QR Code Reader

npx shadcn@latest add @algorize-ui/qr-code-reader

components/custom/blocks/QrCodeReaderBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs this for you. Run it yourself only if you are adding QR Code Reader to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

jsqr is an npm package.

npm install jsqr

Features

Explore the QR Code Generator's customizable features, allowing for different colors, sizes, and embedded logos within the code.

Fully Client-side

Runs securely in the browser without relying on any external APIs.

High-Fidelity Output

Generates crisp, scalable SVG QR codes that never lose visual quality.

Highly Customizable

Easily tweak foreground/background colors, sizes, and error correction levels.

Drag-and-Drop Scan

The reader supports both file selection and drag-and-drop for a premium UX.

Best Practices & Guidelines

Color Contrast

Ensure a high contrast between the background and foreground colors. A light background (e.g., #FFFFFF) with a dark foreground (e.g., #000000) is recommended for optimal scannability by smartphone cameras.

Error Correction Level

Use L (Low) for simple URLs to keep the QR code visually clean and sparse. Use H (High) if you plan to overlay a custom logo in the center, as it allows up to 30% of the code to be obscured without breaking.

Error Handling

The reader automatically handles invalid or unreadable images. Consider adding UI feedback (e.g., a toast notification) if the onRead callback isn't triggered after a user uploads an invalid file.

Accessibility (a11y)

The drag-and-drop area is keyboard accessible, but ensure any surrounding labels or descriptions clearly instruct the user to upload a valid QR code image.

Props Reference

Prop	Type	Default	Description
`value`	`string`	`""`	The data or URL to encode inside the QR code (Required).
`size`	`number`	`128`	The width and height of the QR code in pixels.
`bgColor`	`string`	`"#FFFFFF"`	Background color of the QR code (supports hex/rgba).
`fgColor`	`string`	`"#000000"`	Foreground color (the dots/pattern) of the QR code.
`level`	`"L" \| "M" \| "Q" \| "H"`	`"L"`	Error correction level (Low, Medium, Quartile, High).

Prop	Type	Default	Description
`onRead`	`(data: string) => void`	`undefined`	Callback function triggered upon successfully reading a QR code from an image.
`className`	`string`	`undefined`	Additional CSS classes applied to the outer wrapper of the reader component.