build69
Sign inGet API key
build69  /  Components  /  Data Display  /  QRCode

QRCode

v1.0.2NewUpdated 20 Jul 2026

Scannable-code tiles for payment slips, receipts, shipping labels and product tags. QRCode renders a token-themed SVG QR (react-qr-code) with quiet-zone padding, optional centre logo slot, caption and a download-as-PNG a

View source← Back to catalog

Preview

Live · 9 stories
Prompt Pay SampleOpen ↗
▸Why this is recommendedqrqrcodepromptpaypayment+9

QRCode — prompt pay sample.

Recommended for+14
  • ✓PromptPay payment QR on invoices and receipts
  • ✓Showing a QR code customers scan with a Thai banking app to pay
  • ✓Deep-link QR for restaurant menus, tracking pages and check-ins
  • ✓Letting a user save a payment QR as a PNG image
  • ✓QR on a printed payment slip with the shop logo in the centre
  • ✓Event ticket or check-in QR codes
Tags+6
qrqrcodepromptpaypaymentscandownloadpnginvoicereceiptdeep-linkpromptpaysample
Features+4
  • SVG QR via react-qr-code with L/M/Q/H error-correction levels
  • Token-driven fg/bg colours (foreground/background) with override props
  • Centre logo/monogram slot — auto-bumps level to H for scannability
  • Caption slot rendered as an accessible figcaption
  • Download-as-PNG button (SVG→canvas, CSS variables resolved to concrete colours)
  • Configurable quiet-zone padding and export size
  • role="img" aria labelling with a customisable aria-label
Not recommended for−2
  • ✕Scanning/decoding codes from camera input (render-only)
  • ✕Dynamic payloads that must be regenerated server-side per scan
  • ✕1D product barcodes on retail labels (use Barcode)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "QRCode" })

Usage

import { QRCode } from '@/components/data-display/qr-code';

<QRCode
  value={promptPayPayload}
  size={180}
  label={<Coffee />}
  downloadable
  downloadFileName="promptpay-inv-2026-00042.png"
  caption="Scan with any Thai banking app · ฿1,250.00"
  aria-label="PromptPay QR code for invoice INV-2026-00042"
/>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
value

Payload encoded into the QR code (URL, PromptPay payload, plain text…)

stringyes
size

Rendered edge length of the QR svg in px (default 160)

number—
level

Error-correction level (default M; H automatically when a centre label is set)

'L' | 'M' | 'Q' | 'H'—
padding

Quiet-zone padding around the code in px (default 12)

number—
fgColor

Module colour (default the foreground token)

string—
bgColor

Quiet-zone / background colour (default the background token)

string—
label

Centre logo/monogram overlay slot, rendered on a bgColor chip; not included in PNG export

ReactNode—
caption

Caption rendered under the code as a figcaption

ReactNode—
downloadable

Renders a "Download PNG" button under the tile (default false)

boolean—
downloadFileName

File name for the PNG export (default qr-code.png)

string—
downloadSize

Edge length in px of the exported PNG (default 512)

number—
aria-label

Accessible description of what the code encodes (default "QR code")

string—

Related

Platform docsAll componentsSource files