QR Code Generator

qrdx library API reference qr-code-generator.json

Text or URL

Style

Installation

pnpm dlx shadcn@latest add https://qrdx.dev/r/qr-code-generator.json

Usage

import { QrCodeGenerator } from "@/components/qr-code-generator";

<QrCodeGenerator defaultValue="https://example.com" />

The preview updates as you type. Each preset button shows a small sample of its style, and downloads use the selected preset at 1024 pixels.

Examples

Custom presets

Replace the built-in presets with your own. A preset is an id, a name and a style with any qrdx option, including gradients, logos and error correction level.

Text or URL

Style

The built-in presets are exported as QR_CODE_PRESETS, so you can extend them:

import { QR_CODE_PRESETS, QrCodeGenerator } from "@/components/qr-code-generator";

<QrCodeGenerator
  presets={[
    ...QR_CODE_PRESETS,
    { id: "brand", name: "Brand", style: { fgColor: "#155DFC" } },
  ]}
/>

Saving the result

onChange reports the text and the selected preset on every change, for example to store the user's choice:

<QrCodeGenerator
  onChange={({ value, preset }) => saveDraft({ value, style: preset.style })}
/>

API Reference

Prop

Type

QrCodePreset