shadcn.io is not affiliated with official shadcn/ui
Contact Cards Chat Block for Svelte
A networking-app thread with two contact cards in the log, a Share contact list that posts a card, a Download .vcf button that saves a real vCard file and a Copy number button.
Installation
Overview
Show people being passed around a conversation, with this contact cards chat for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Cardhurst, a networking app: Hanne Ostby is planning a mixer, and the log holds short Message and Bubble rows around two contact cards, a photographer you sent and a caterer she sent, each with large initials, name, role, phone, email, "Download .vcf" and a Copy Button for the number. "Share contact" in the tools row opens a Popover of four people; choosing one posts their card as your message and a typed reply follows. The composer's Shine Button is the only colored control, and the frame is ruled by Guides. It's the starting point for a CRM thread, a recruiter chat or any messenger that passes people along.
FAQ
What stays in the page, and how do I make it real?
The thread, the four people and the replies are typed in the file, and nothing is sent. "Download .vcf" is real: it builds a vCard 3.0 file from the card's own data and saves it, but nothing is added to an address book, and the status line under the composer says what was saved. To wire it for real, post the shared contact's id to your server where share appends the card, and load the people from your directory instead of the CONTACTS list.
What is in the .vcf file?
A short vCard 3.0 document with the full name, the structured name, the job title, one phone number and one email, written with CRLF line ends as the format asks. It is built by vcardOf from the same typed data the card shows, so the file and the card cannot drift apart. Phones and mail apps import it as a new contact.
How does Share contact work?
The button opens a small list of four typed people, each with initials, name and role. Choosing one closes the list, posts their card as your newest message, says so in the status line and starts a typing line before a typed reply from Hanne. The list is a non-modal popover, so Escape closes it and focus returns to the button.
How does the composer work?
Enter sends and Shift and Enter add a line, which the field's description says for a screen reader; Enter during text composition (an IME) is left alone. Send stays quiet while the field is empty and says so if pressed, and focus returns to the field after sending. Replies come from a short typed script keyed on words in your message, with one fallback per message and a last line that says it was the last sample reply.
Is it usable with a keyboard and a screen reader?
Each card is an article named "Contact card" with the person's name, phone and email in a description list; the phone and email read left to right inside right-to-left layouts. The log is a focusable region announced as a log, copying announces itself through the one status line, and the avatars are hidden from assistive technology because the name is always in text.