QrCode

Code

import { QrCode } from "@fadymondy/nasaq/web";export function Share({ url }: { url: string }) {  return <QrCode value={url} downloadable downloadName="my-link" />;}

Utilities · beta

Live examples and controls: QrCode in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/qr-code.json

A QR code that stays sharp at any size. The bit matrix comes from uqr; the drawing is Nasaq's own SVG, so modules can be squares, dots or rounded, the three corner eyes have their own shape and colour, and a logo can sit in the middle. QrCodeGenerator wraps it in a card with the controls.

When to useCopy Anchor Link

• Share a link, a Wi-Fi string, a vCard or a pairing payload.
• Let people make and download their own code (QrCodeGenerator).
• Any place you need the code as inline SVG, with no image request.

When not to useCopy Anchor Link

• One-dimensional retail or shipping codes: use Barcode.
• A TOTP set-up: TwoFactorSetup already draws its own.
• A pairing flow with a countdown: WhatsappQrConnect.

ImportCopy Anchor Link

import { QrCode, QrCodeGenerator } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { QrCode } from "@fadymondy/nasaq/web";

export function Share({ url }: { url: string }) {
  return <QrCode value={url} downloadable downloadName="my-link" />;
}

AnatomyCopy Anchor Link

QrCode                          data-slot="qr-code"
├─ svg                          data-slot="qr-code-svg" (role="img", aria-label)
└─ actions (downloadable)       data-slot="qr-code-actions": Download SVG, Download PNG
QrCodeGenerator                 data-slot="qr-code-generator" (Card)
├─ content, module style, eye style, colours, logo upload
└─ preview: QrCode with downloads

APICopy Anchor Link

QrCode: every div prop except children, plus:

QrCodeGenerator: defaultValue, defaultModuleStyle, defaultEyeStyle, defaultFg, defaultBg, defaultLogo, downloadName, labels.

Helpers (no React): qrLayout(options) returns { size, modules, eyes, logo } path data; qrSvgString(options) returns a standalone SVG string; downloadSvg, downloadPng, svgToPng, resolveColor are shared with Barcode.

ExamplesCopy Anchor Link

Brand colours and a logo

import { QrCode } from "@fadymondy/nasaq/web";

export function Brand({ logo }: { logo: string }) {
  return <QrCode value="https://example.com" moduleStyle="rounded" eyeStyle="rounded" fg="var(--nq-brand)" logo={{ src: logo }} />;
}

Make an SVG string on the server

import { qrSvgString } from "@fadymondy/nasaq/web";

export const svg = qrSvgString({ value: "https://example.com", fg: "rgb(0, 0, 0)", bg: "rgb(255, 255, 255)" });

AccessibilityCopy Anchor Link

• The SVG is role="img" with an accessible name. The content is not read out: pass label when the value is long or private.
• Download buttons are real buttons with text. The colour inputs in the generator have labels.
• Contrast: dark on light with a quiet zone scans best. Light-on-dark and low-contrast pairs often fail in cameras.

RTL & i18nCopy Anchor Link

• The code is not mirrored: it is data, and scanners read it one way. The generator UI mirrors and has Arabic strings.
• The value field is dir="ltr", because URLs and payloads are left-to-right.

Styling & tokensCopy Anchor Link

• Colours default to plain black and white for scanning. Tokens are resolved to concrete colours at download time, so files are portable.
• Target [data-slot="qr-code"], [data-slot="qr-code-svg"].

Do / Don'tCopy Anchor Link

• Do test a styled code with a real phone before shipping it.
• Do keep a logo at or under 22 percent of the width.
• Don't use dots with a low error correction for long values: the code gets dense.
• Don't put a secret in a QR that will be shown to anyone else.

RelatedCopy Anchor Link

• Barcode
• WhatsappQrConnect
• TwoFactorSetup

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-utilities-qr-code--docs