Contact card React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Contact card is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import ContactCard from @/components/ui/contact-card.

import { Pencil, PhoneCall, Trash2 } from "lucide-react"
import { ContactCard, type ContactData } from "@/components/ui/contact-card"

const emma: ContactData = {
  id: "c-emma",
  name: "Emma Carter",
  title: "Head of Procurement",
  company: { name: "Northwind Tech Inc.", href: "/clients/c01" },
  email: "emma.carter@northwindtech.com",
  phone: "+1 415 555 0132",
  whatsapp: true,
  location: "San Francisco, CA",
  status: { label: "Active client", tone: "success" },
  tags: [{ label: "Decision maker" }, { label: "2027 budget", tone: "info" }],
  owner: { name: "Anna Price", avatar: "/demo/ana-pop.jpg" },
  lastActivity: { label: "Call", at: new Date(2026, 8, 24, 15, 55), icon: <PhoneCall /> },
  href: "/contacts/emma-carter",
}

export function ContactPanel({ onFavorite }: { onFavorite: (favorite: boolean) => Promise<unknown> }) {
  return (
    <ContactCard
      contact={emma}
      defaultFavorite={false}
      onFavoriteChange={(favorite) => onFavorite(favorite)}
      actions={[
        { label: "Edit", icon: <Pencil /> },
        { type: "separator" },
        { label: "Delete contact", icon: <Trash2 />, tone: "danger" },
      ]}
      locale="en-US"
      labels={{ owner: "Account owner" }}
    />
  )
}

Props

• contact*
  ContactData

  { id; kind?: "person" | "company"; name; avatar?; title?; company?: { name; href?; logo? }; email?; phone?; whatsapp?: string | boolean (true uses phone); website?; location?; cui?; status?: { label; tone?; icon? }; tags?: { label; tone?; color? }[]; owner?: { name; avatar? }; lastActivity?: { label; at; icon? }; fields?: ContactFact[]; href? }. Anything missing simply does not render.

• layoutdefault "full"
  "full" | "compact" | "row"

  full: every part, for a record's side panel. compact: centered avatar, name, role, status and round buttons, for grids. row: one 56px line with icon buttons, for lists.

• variantdefault "elevated"
  "elevated" | "outline" | "soft" | "ghost"

  The card surface: a raised panel, a hairline frame, the flat gray tile or nothing (ghost, for rows inside a list group).

• sizedefault "md"
  "sm" | "md"

  md: a 48px avatar and a 17px name in the full layout (64px in compact); sm one step smaller.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg"

  Card corners: none, 12px, 16px or 24px. Rows inside a list group use none.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Colors the selected ring and the star when it is on.

• colordefault ""
  string

  Any CSS color for the selected ring and the star. Replaces the tone.

• defaultFavoritedefault false
  boolean

  The star's starting state when uncontrolled. Setting it (or favorite, onFavoriteChange) shows the star.

• favorite
  boolean

  Controlled star.

• onFavoriteChange
  ((favorite: boolean, contact: ContactData) => void | Promise<unknown>)

  Called when the star is toggled. Return a promise to keep it optimistic while pending; a rejection rolls it back and announces labels.favoriteError.

• showFavoritedefault false
  boolean

  Shows the star even without favorite props (an uncontrolled star that starts off).

• selecteddefault false
  boolean

  A 2px ring in the tone and data-selected, for the picked contact in a grid (drawn inside the edge on rows, so a list group never clips it).

• loadingdefault false
  boolean

  Skeletons in the layout's shape (aria-busy); the content fades in when it turns false.

• showFieldsdefault true
  boolean

  Full layout: the rows for email, phone, website, location and CUI, then contact.fields.

• showTagsdefault true
  boolean

  Full layout: the tag row.

• showActivitydefault true
  boolean

  Full layout: the footer with the owner and the last activity (a <time>, relative to now).

• copyabledefault true
  boolean

  Copy buttons on email, phone, CUI and facts with copyValue: on hover or focus with a mouse, always on touch.

• channelsdefault "["call", "email", "whatsapp"]"
  ("call" | "email" | "whatsapp" | "sms" | "website")[]

  Which contact buttons show, in order. A channel without data (no phone, no email) is hidden; with none left the row disappears.

• onCall
  (contact: ContactData) => void

  Replaces the tel: links of the Call button and the phone field (a softphone).

• onEmail
  (contact: ContactData) => void

  Replaces the mailto: links of the Email button and the email field (an in-app composer).

• onMessage
  (contact: ContactData) => void

  Replaces the wa.me and sms: links.

• onChannelSelect
  (channel: ContactChannel, contact: ContactData, event: ContactChannelEvent) => void

  Runs first for every contact button, every channel picked in the row menu and the email / phone / website links of the fields. event.preventDefault() stops the link and the handler (tracking, a confirmation).

• actions
  MenuEntry[]

  The ⋯ menu (Edit, Add note, Merge, Delete with tone "danger"), a bottom sheet on phones. Rows put the channels on top.

• localedefault ""
  string

  Formats the last activity time ("45 min. ago"). Empty uses the UIProvider locale, then the browser's.

• now
  Date | number

  The reference time for the relative activity time. Defaults to a live clock that ticks every minute.

• linkComponent
  (props: LinkComponentProps) => ReactNode

  Renders the name, company and fact links through your router's Link. Defaults to the LinkProvider's, else <a>.

• labelsdefault "DEFAULT_CONTACT_CARD_LABELS"
  Partial<ContactCardLabels>

  call, email, whatsapp, sms, website, phone, location, copy, copied, favorite, favoriteAdd, favoriteRemove, favoriteError, actions, cancel, owner, lastActivity, cui, noActivity, tags (the tag list's name), actionLabel(action, name) ("Call Emma Carter"), copyField(field) ("Copy Email").

• classNames
  Partial<Record<"media" | "heading" | "name" | "title" | "company" | "status" | "favorite" | "menu" | "actions" | "action" | "fields" | "field" | "tags" | "footer" | "owner" | "activity", string>>

  Extra classes for the inner parts.

• className
  string

  Extra classes for the <article>, merged last.

Parts

FAQ

Used in

More React data display components