Contact card

A person or a business the agent found. People show their local time and how far it is from yours; businesses show whether they are open right now, worked out from their hours in their own zone. Every value copies.

Markdown

On this page

Role, local time and how far it is from yours, email, phone and links, each one copyable.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/contact-card.json

Usage

tsx

import { ContactCard } from "@/components/ui/chatcn/contact-card"

<ContactCard
  name="Amara Nwosu"
  jobTitle="Staff engineer, payments"
  company="Fieldnote"
  email="amara.nwosu@fieldnote.studio"
  phone="+234 803 555 0142"
  timeZone="Africa/Lagos"
/>

Every widget takes plain props from a tool result, so map the tool output straight onto it. While the call runs, pass loading for a skeleton that matches the final layout; when it fails, pass error (and onRetry). Install with contact-card and nothing else from the kit is required at runtime.

The local time ticks on the minute. For screenshots and tests, pin it with now. For a business, pass kind="business" with hours (day 0 is Sunday, times in its zone) and the card works out Open now, Closes soon (amber, within an hour) or Closed with the next opening, including hours that run past midnight.

Examples

Business

Open now in green, closing soon in amber, rating, address and the week's hours.

States

Compact rows, loading, a directory error, no match and very long values.

Props

Prop	Type	Notes
`kind`	`"person" \| "business"`	Default `person`
`name`, `avatar`, `pronouns`	`string`	Initials when there is no photo
`jobTitle`, `category`, `company`	`string`	Job for people, category for businesses
`email`, `phone`	`string`	Links plus Email and Call buttons
`links`	`{ label, href }[]`	Text links, no brand marks
`timeZone`	`string`	IANA. Local time and offset for people, open state for businesses
`address`, `addressHref`	`string`
`hours`	`{ day, open, close }[]`	24 hour times. Missing days are closed
`rating`, `reviewCount`	`number`	Businesses
`now`	`Date \| number`	Pin the clock
`onEmail`, `onCall`	`() => void`	Called before the mailto or tel link opens
`layout`	`"full" \| "compact"`	Default `full`
`loading`, `error`, `onRetry`, `empty`		States
`labels`	`Partial<ContactCardLabels>`	Every string the card shows or announces, day names and time offsets included, for translation

Accessibility

Each row is labelled (Email, Phone, Address) for screen readers, and its copy button says what it copies.
Copy buttons appear on hover or focus and are always visible, at 44 px, on touch screens.
Open, closing soon and closed are written in words next to their mark. Today is marked in the hours table with aria-current.
Phone numbers keep left to right order inside RTL layouts.

Motion

Copy swaps to a check with the kit's 150 ms crossfade. The hours open instantly.