Add this component

npx zentauri-ui add qr-code

Accessibility notes

Canvas-based QR code with an aria-label describing the encoded value. Pair with a visible caption or off-screen text for non-visual access.

Dependency notes

Requires the qrcode npm package. Install it alongside Zentauri UI: pnpm add qrcode.

Utilities

QR code generator for encoding data

Use the QR code generator component to create QR codes from any text or data. Configure error correction level, size, colors, and optional captions. The component renders to canvas for crisp output at any resolution.

zentauri-ui.vercel.app

Error correction: H

QR code generator variants playground

Enter a value and pick an error correction level to preview the QR code generator live. Toggle Show output / Show code and the snippet updates to match the selected variant.

The level prop controls the QR code's error correction capacity — higher levels survive more damage but reduce data capacity. L recovers ~7% damage, M ~15% (default), Q ~25%, and H ~30%.

ValueError correction level

zentauri-ui.vercel.app

Qr Code API

Generated from the package prop types and variant definitions.

QrCode

QrCodeProps

State

Prop	Type	Default
value*	`string`	none

Behavior

Prop	Type	Default
bgColor	`string \| undefined`	none
canvasSize	`number \| undefined`	none
caption	`ReactNode`	none
fgColor	`string \| undefined`	none
level	`QrCodeLevel \| undefined`	none
margin	`number \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

QrCodeAnimated

QrCodeAnimatedProps

animated

State

Prop	Type	Default
value*	`string`	none

Behavior

Prop	Type	Default
animation	`QrCodeAnimation \| undefined`	none
bgColor	`string \| undefined`	none
canvasSize	`number \| undefined`	none
caption	`ReactNode`	none
fgColor	`string \| undefined`	none
level	`QrCodeLevel \| undefined`	none
margin	`number \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`Ref<HTMLDivElement> \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

CSS variable overrides

QR code CSS variables

Override these QR code variables on :root, a theme selector, or a component wrapper.

8 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-qr-code-bg: oklch(98.4% 0.003 247.858);
  --zui-qr-code-border: #0000001a;
  --zui-qr-code-canvas-bg: oklch(92.9% 0.013 255.508);
  --zui-qr-code-caption-fg: oklch(55.2% 0.046 257.417);
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-qr-code-bg-dark: oklch(12.9% 0.042 264.695);
  --zui-qr-code-border-dark: #ffffff1a;
}

What it does

The QR code generator component takes a value (text, URL, or any data) and renders it as a QR code using a canvas element. You can configure the error correction level, pixel size, colors, and margin. An optional caption can be displayed below the QR code.

The component supports an animated variant with entrance animations like fade-in, zoom-in, slide-up, and rotate-in when using framer-motion.

Composition and API

Pass the data to encode via the required value prop. Configure the appearance with size (sm/md/lg) and appearance variants. Use canvasSize to control the pixel dimensions of the generated QR code. The level prop sets error correction, and bgColor/fgColor control colors.

Common use cases

QR codes are widely used for URL sharing, Wi-Fi credentials, contact information, payment links, and product identification. The generator is ideal for marketing pages, admin dashboards, event ticketing systems, and any application that needs to encode data for mobile scanning.

Accessibility

The canvas element includes an aria-label describing the encoded value. The component uses semantic HTML structure and data-slot attributes for styling targets. The animated variant respects reduced motion preferences.

Next.js integration notes

Colocate examples under the App Router, keep server and client boundaries explicit, and avoid pulling interactive components into unexpected server layouts.

Set NEXT_PUBLIC_SITE_URL so canonical and Open Graph URLs resolve on deploy.

FAQ

Does the QR Code component work with Next.js App Router?

Yes. Import it like any other React component; the component uses client-side rendering with canvas and works seamlessly with server components when used as a client boundary.

Can I customize QR code colors?

Yes. Use the bgColor and fgColor props to customize the background and foreground colors. The component supports any valid CSS color value.

What error correction levels are available?

The component supports L (7%), M (15%), Q (25%), and H (30%) error correction levels. Higher levels allow more damage before the code becomes unreadable but reduce data capacity.

Is there a maximum data size?

Yes, QR codes have a maximum data capacity depending on the error correction level and version. For level M, a Version 40 QR code can hold up to 4,296 alphanumeric characters.