vCard QR Code

A QR code that saves a contact card when scanned, with a typed vCard 3.0 builder.

qrdx library API reference vcard-qr-code.json

Ada LovelaceEngineer, Analytical Engines

Installation

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

Usage

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

<VCardQrCode
  contact={{
    firstName: "Ada",
    lastName: "Lovelace",
    organization: "Analytical Engines",
    email: "ada@example.com",
  }}
/>

Phone cameras offer to save the contact when they scan the code. Empty fields are left out, which keeps the code small and quick to scan.

Examples

vCard builder

buildVCard returns the vCard 3.0 text the code encodes, with commas, semicolons, backslashes and line breaks escaped. Use it with any QR renderer, or to offer the same contact as a .vcf download.

BEGIN:VCARD
VERSION:3.0
N:Lovelace;Ada;;;
FN:Ada Lovelace
ORG:Analytical Engines\, Ltd.
TEL;TYPE=CELL:+44 7700 900000
ADR;TYPE=WORK:;;;London;;;United Kingdom
END:VCARD

Contact cards hold more text than a link, so the component uses error correction level M to keep the modules large. Add only the fields people need, and check how large to print it with the print size calculator.

API Reference

Prop

Type

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

VCardContact