ComponentsData display

Entity card

The identity of a record at a glance — a contact, a company, a product, an employee — with status, key facts, a stat row and quick actions. Four shapes: a grid card, a compact row for side panels, the header of a record page, and an inline chip that opens a hover card.

Card surface + Avatar + Description list + Radix Hover Card (chip) components/entity-card.tsxtheme · material · accent · density · font

Jane Cooper

Head of Operations · Northwind Traders

CustomerDecision maker
Owner
Ayşe Kaya
Last contact
Nov 6, 2026 · Call
Time zone
Pacific (UTC−8)

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { EntityCard } from "@vamos-ui/react";

<EntityCard
  name="Jane Cooper"
  subtitle="Head of Operations · Northwind Traders"
  status={{ tone: "success", label: "Customer" }}
  contact={{ email: "jane.cooper@northwind.com", phone: "+1 (415) 555-0136" }}
  fields={[{ key: "owner", label: "Owner", value: "Ayşe Kaya" }]}
  href="/contacts/jane-cooper"
/>

The card is an <article> labelled by the name heading. With href, only the name is a link; actions stay separate buttons above the stretched link, each with a name that includes the record.

Initials are locale-correct ("ilker şahin" → "İŞ" in Turkish) via Avatar.

Examples

Company with stats

stats is a row of 2–3 numbers formatted with the current locale (currency, percent); they wrap instead of truncating.

Northwind Traders

northwind.com · Logistics · 240 employees

Active
Open deals
4
Pipeline
$182,400
Win rate
38%

Product tiles (commerce admin)

kind="product" swaps the avatar for an image tile; without a photo it shows a package icon.

Inline chip with hover card

variant="chip" fits inside text; the hover card is supplementary — the link carries everything.

Deal owner Daniel Brooks moved this deal to Negotiation with Northwind Traders.

Side-panel rows, archived, selected, loading

Deal team

API

EntityCard

PropTypeDefault
name
Record name — the heading, the initials and the accessible name of the actions.
string—
kind
Defaults only: avatar shape and fallback icon; product uses an image tile.
"person" | "organization" | "product" | "generic""person"
variant
Grid tile, side-panel row, record header or inline chip with hover card.
"card" | "compact" | "header" | "chip""card"
subtitle
Role · company, domain or SKU.
ReactNode—
media
Photo, logo or product image. Missing → initials or an icon.
{ src?: string; alt?: string; fallback?: ReactNode }—
status
One status pill ("Active", "Out of stock").
{ tone: "neutral" | "accent" | "success" | "warning" | "danger" | "info"; label: string }—
badges
Extra badges after the status.
ReactNode—
description
Bio or summary (clamped to 3 lines on cards).
ReactNode—
fields
Key facts rendered as a small Description list (copyable, formatted).
DescriptionEntry[]—
stats
2–4 numbers in a row.
{ label: string; value: number | string; format?: ValueFormat }[]—
contact
Built-in labelled quick actions ("Email Jane Cooper").
{ email?: string; phone?: string; website?: string }—
actions
Your own quick actions (labelled IconButtons, a menu).
ReactNode—
href
The name becomes the one primary link, stretched over the card.
string—
headingAs
Heading level of the name.
"h1" | "h2" | "h3" | "h4" | "p""h3" (header: "h1")
archived
Muted, with an "Archived" badge.
booleanfalse
selected
Picker state: accent outline and aria-current.
booleanfalse
loading
Skeleton in the variant's shape (aria-busy).
booleanfalse
labels
email, call, website, archived, selected.
Partial<EntityCardLabels>—
Previous
Empty state
Next
Export