vCard & Contact Card

Downloadable .vcf: buildVCard(), a Save-contact button and a flip card with a scan-to-save QR.

@kineticui/uimotion

Maya Kapoor

Design Engineer · Kinetic Labs

maya@kinetic.dev +91 98765 43210Bengaluru, India

Scan to savePoint your phone camera at the code to add Maya to Contacts.

Preview the generated .vcf

BEGIN:VCARD
VERSION:3.0
N:Kapoor;Maya;;;
FN:Maya Kapoor
ORG:Kinetic Labs
TITLE:Design Engineer
TEL;TYPE=CELL,VOICE:+919876543210
EMAIL;TYPE=INTERNET,PREF:maya@kinetic.dev
URL:https://kinetic-ui.chaitanya-nk.com
ADR;TYPE=WORK:;;;Bengaluru\, India;;;
X-SOCIALPROFILE;TYPE=linkedin:https://www.linkedin.com/in/maya-kapoor
X-SOCIALPROFILE;TYPE=github:https://github.com/maya-kapoor
X-SOCIALPROFILE;TYPE=x:https://x.com/mayakapoor
X-SOCIALPROFILE;TYPE=instagram:https://instagram.com/maya.designs
END:VCARD

Installation

Copies the source into your project so you can edit every line.

$ npx @kineticui/cli add vcard

Also installs: qr-code, social-icons

Exports

VCardButtonContactCard

Source: packages/ui/src/components/vcard.tsx