QR Code

A QR code generator with rounded finder patterns and dot-style data modules, plus an optional center logo slot.

Last updated January 1, 1980

Overview

Installation

$ pnpm dlx shadcn@latest add @persianlabsui/qr-code

Usage

The SVG renders at size pixels by default, but scales to its container when CSS sizes it — the wrapper below gives it a card frame and full-width scaling.

import { QrCode } from "@/components/ui/qr-code"
 
export function Example() {
  return (
    <div className="dark:border-input w-[140px] rounded-lg p-2 shadow-[0_0_0_1px_rgba(0,0,0,.08),_0px_2px_2px_rgba(0,0,0,.04)] dark:border [&_svg]:h-auto [&_svg]:w-full">
      <QrCode value="https://ui.persian-labs.ir" size={140} />
    </div>
  )
}

Custom Colors

Override fgColor and bgColor to fit branded tickets, packaging, or event cards. Keep enough contrast between the two for the code to stay scannable.

Center Logo

Pass any element as logo to render it centered over the code on an opaque chip matching bgColor. The logo covers data modules, so raise the error correction level — errorCorrectionLevel="H" recovers from up to 30% obscured area.

Loading Skeleton

QrCodeSkeleton mirrors QrCode 's size prop, so swapping between the two while the encoded value loads causes zero layout shift. The example simulates a 3-second load — press the reload button to replay it.

RTL

QR data itself is direction-agnostic visual data, so the code renders identically regardless of the surrounding document direction — any captions around it are what follow the page's direction.

API Reference

QrCode

Prop	Type	Default	Description
value	string	—	The text or URL encoded into the code.
size	number	268	The width and height of the rendered SVG in pixels. The SVG scales to its container when styled with CSS.
fgColor	string	"var(--foreground)"	The fill color for the data modules and finder patterns. Keep enough contrast against bgColor for the code to stay scannable.
bgColor	string	"var(--background)"	The background color of the QR surface, also used behind the logo chip.
errorCorrectionLevel	"L" \| "M" \| "Q" \| "H"	"M"	The QR error correction level passed to the generator. Use "H" when rendering a logo so the code survives the covered modules.
logo	React.ReactNode	—	An element rendered centered over the code on an opaque chip matching bgColor. Decorative by default (aria-hidden).
class	string	''	Custom classes merged onto the root SVG element.
…props	React.ComponentProps<'svg'>	—	All other props are forwarded to the underlying svg.

QrCodeSkeleton

Prop	Type	Default	Description
size	number	268	Mirrors QrCode's size prop so the placeholder occupies exactly the same footprint — swapping between the two causes zero layout shift.
class	string	''	Custom classes merged onto the root SVG element.
…props	React.ComponentProps<'svg'>	—	All other props are forwarded to the underlying svg.

Edit this page on GitHub

PreviousProximity Sidebar NextQuestionnaire