QR Code Card

Installation

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

Usage

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

<QrCodeCard
  value="https://example.com/menu"
  title="Our menu"
  description="Scan to see today's specials."
/>

Anything you pass as children renders in the card footer, such as a copy button or a download menu.

Examples

Frames

frame puts the call to action under the code ("bottom"), above it ("top") or leaves the frame out ("none"). cta changes the label, and frameClassName restyles the frame, for example with your brand color.

The frame uses your theme's foreground and background colors by default, so it stays legible in light and dark mode. The code itself keeps a light background, which every scanner reads.

Styling the code

qr takes any qrdx style option: fgColor, bgColor, gradients, bodyPattern, corner patterns, logo and templateId.

<QrCodeCard
  value="https://example.com"
  qr={{
    fgColor: "#155DFC",
    bodyPattern: "rounded",
    cornerEyePattern: "extra-rounded",
  }}
/>

API Reference

Any other prop, such as className, is passed to the Card.