tailwind-stack/

TailwindQR

Why scan a library when you can scan a class?
className your way to QR codes!

React Server ComponentsZero ConfigPNG + SVGBracket Syntax
<QR className="qr-encode-[https://github.com]" />
renders
QR Code

Syntax Reference

<QR className="qr-encode-[{content}][-size-{n}][-ec-{L|M|Q|H}][-fg-{hex}][-bg-{hex}]" />
qr-encode-[URL]

Bracket syntax

qr-encode-$alias

Config alias

-size-lg

Size preset

-ec-H

Error correction

-fg-000

Foreground

-bg-fff

Background

Size Presets

PresetSizePreview
sm64x64QR Code
md (default)128x128QR Code
lg256x256QR Code
xl512x512QR Code

Live Examples

Real QR codes generated from className

Basic URL

URL in brackets

<QR className="qr-encode-[https://example.com]" />
renders
QR Code

With Size

256x256 QR code

<QR className="qr-encode-[https://github.com]-size-lg" />
renders
QR Code

Error Correction High

30% error recovery

<QR className="qr-encode-[https://example.com]-ec-H" />
renders
QR Code

Custom Colors

Brand colors

<QR className="qr-encode-[https://example.com]-fg-2563eb-bg-eff6ff" />
renders
QR Code

Plain Text

Literal spaces work in brackets

<QR className="qr-encode-[Hello World]" />
renders
QR Code

Config Alias

WiFi from config

<QR className="qr-encode-$wifi-size-lg" />
renders
QR Code

Error Correction

Higher = more damage resistance, larger QR

L (~7%)

QR Code

M (~15%)

QR Code

Q (~25%)

QR Code

H (~30%)

QR Code

SVG Output

Use as="svg" for inline SVG

PNG (default)

Data URL image

<QR className="qr-encode-[PNG]" />
renders
QR Code

SVG

Inline SVG element

<QR className="qr-encode-[SVG]" as="svg" />
renders

How to Use

// Basic usage
import { QR } from '@tailwind-stack/qr'
<QR className="qr-encode-[https://example.com]" />
// With config (lib/qr-config.ts)
import { setConfig } from '@tailwind-stack/qr'
setConfig({
  aliases: {
    homepage: 'https://example.com',
    wifi: 'WIFI:T:WPA;S:Net;P:pass;;',
  }
})
// Then use alias
<QR className="qr-encode-$homepage-size-lg" />

Programmatic API

import { generateQRCode } from '@tailwind-stack/qr'
// Generate QR as data URL
const dataUrl = await generateQRCode( 'https://example.com', {
  size: 256,
  errorCorrection: 'H',
  format: 'png' // or 'svg'
}
)