QR Code

Installation

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

Usage

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

<QrCode value="https://qrdx.dev" />

The code renders as an SVG with an accessible name, so it stays sharp at any size and screen readers announce what it links to.

Examples

Sizes

size sets the on-screen width and height in pixels. Downloads use downloadSize, so a small code on the page still exports a print-ready file.

Colors

fgColor and bgColor take any CSS color. eyeColor and dotColor color the three corner eyes separately. Keep the modules darker than the background so every scanner can read the code.

Gradients

Pass a qrdx gradient instead of a color: linear with an angle, or radial. Gradients carry over into PNG, SVG and PDF downloads.

Patterns

bodyPattern shapes the data modules, cornerEyePattern the corner frames and cornerEyeDotPattern the dots inside them. See patterns for every shape.

Logo

logo places an image in the center and clears the modules behind it. Use error correction level H so the code still scans with part of it covered. A data URL keeps the logo in downloads; a remote image needs CORS headers.

Frame templates

templateId draws a qrdx template around the code. Pair it with caption for a call to action under the frame.

Download formats

downloadFormats picks the buttons: png, jpg, svg and pdf. PDF export needs the optional jspdf package (npm install jspdf). Pass [] to hide the buttons.

For a single menu with formats and sizes, use QR Code Download.

Dark mode

The default white background is the safest choice in dark themes: dark modules on a light tile scan with every reader. To follow the theme instead, set fgColor="currentColor" and a transparent background. The code then inverts in dark mode, which phone cameras read but some older scanners don't.

API Reference

Any other prop, such as className, is passed to the wrapping <figure>.