shadcn/ui registry

Eight QR code components for shadcn/ui projects, built on the qrdx library. Install one with a single command and own the code.

QRdx publishes a shadcn/ui registry of QR code components built on the qrdx library. The shadcn CLI copies the source into your project, so you own the code and can change it.

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

Each component has its own page with a live preview, the source, installation steps, examples and an API reference.

Components

QR Code

Styled, accessible QR code with download buttons, colors, gradients, patterns, logos and frame templates.

QR Code Card

A card with the code in a "Scan me" frame, a title, a description and room for actions.

QR Code Download

A menu that exports PNG, SVG, JPG or PDF at the size you pick, or copies the image.

QR Code Share Dialog

A dialog with the code for a link, a copy button, a PNG download and the native share sheet.

QR Code Generator

A text input with a live preview, style presets and download buttons.

QR Code Scanner

A drop zone that reads a QR code from an image in the browser.

Wi-Fi QR Code

A code that joins a Wi-Fi network, with an escaped payload builder.

vCard QR Code

A code that saves a contact card, with a vCard 3.0 builder.

Each component is a single file in components/. The CLI also installs qrdx (plus lucide-react for the icons some components use) and adds the shadcn/ui components it builds on, such as button, card, dialog, dropdown-menu or input.

The full index is at https://qrdx.dev/r/registry.json.

Using the registry namespace

To install with a short name, add the registry to your components.json:

{
  "registries": {
    "@qrdx": "https://qrdx.dev/r/{name}.json"
  }
}

Then add one or several components by name:

pnpm dlx shadcn@latest add @qrdx/qr-code @qrdx/qr-code-download @qrdx/qr-code-share-dialog

Styling

The components use Tailwind classes with the standard shadcn/ui theme tokens (bg-card, border, text-muted-foreground, ring-ring) and your own Button, Card, Dialog and Input, so they follow your theme and dark mode. QR codes keep a light background by default, because dark modules on a light tile scan with every reader.

PDF downloads need the optional jspdf package (npm install jspdf).