QR Code Share Dialog

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

qrdx library API reference qr-code-share-dialog.json

Installation

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

Usage

import { QrCodeShareDialog } from "@/components/qr-code-share-dialog";

<QrCodeShareDialog url="https://example.com/invite/abc123" />

The dialog shows the code, the link in a read-only field with a copy button, and a PNG download. On devices with a share sheet (most phones), a "Share…" button opens it.

Examples

Custom trigger

Pass your own trigger as children, such as an icon button in a toolbar. title, description and qr customize the dialog.

Controlled

The dialog accepts the Dialog props, so you can open it from code:

const [open, setOpen] = useState(false);

<QrCodeShareDialog
  url="https://example.com"
  open={open}
  onOpenChange={setOpen}
/>

API Reference

Prop

Type

open, defaultOpen, onOpenChange and modal are passed to the Dialog.