build69
Sign inGet API key
build69  /  Components  /  Overlays  /  HoverCard

HoverCard

v1.0.3Updated 20 Jul 2026

Rich preview card that opens when the pointer rests on (or keyboard focus reaches) a trigger, built on Radix HoverCard with the same popover surface styling as Popover. Ships width presets, an arrow option, tunable open/

View source← Back to catalog

Preview

Live · 13 stories
DefaultOpen ↗
▸Why this is recommendedhoverpreviewprofilemention+3

The default, out-of-the-box HoverCard.

Recommended for+14
  • ✓People previews on @mentions in chat or CRM activity feeds
  • ✓Record previews on links (invoices, customers, deals)
  • ✓Supplementary detail behind table cells
Tags+6
hoverpreviewprofilementionoverlayradixdefault
Features+4
  • Opens on hover or keyboard focus, closes on blur / Escape
  • Tunable openDelay (default 300ms) / closeDelay (default 200ms)
  • Side + align positioning with optional arrow
  • Width presets sm / md / lg / auto matching the Popover size scale
  • Controlled and uncontrolled open state
  • ProfileHoverCard: avatar + presence dot + name + description + meta rows + action slot
  • Respects prefers-reduced-motion
Not recommended for−2
  • ✕Click-to-open panels or mini-forms (use Popover)
  • ✕Short text hints (use Tooltip)
  • ✕Touch-primary flows where hover does not exist

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "HoverCard" })

Usage

import { ProfileHoverCard } from '@/components/overlays/hover-card';

<ProfileHoverCard
  name="Somchai Prasert"
  description="Owner, Somchai Auto Service"
  status="online"
  meta={[{ icon: <MapPin />, label: 'Chiang Mai' }]}
  action={<Button size="sm" tone="primary" emphasis="soft">Message</Button>}
>
  <a href="/customers/somchai">Somchai Prasert</a>
</ProfileHoverCard>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
openDelay

Delay in ms before opening on hover (default 300)

number—
closeDelay

Delay in ms before closing after the pointer leaves (default 200)

number—
width

Content width preset (HoverCardContent / ProfileHoverCard)

'sm' | 'md' | 'lg' | 'auto'—
arrow

Render a small arrow pointing at the trigger

boolean—
side

Preferred side of the trigger

'top' | 'right' | 'bottom' | 'left'—
align

Alignment along the chosen side

'start' | 'center' | 'end'—
meta

ProfileHoverCard: icon + label fact rows (location, company, phone)

ProfileHoverCardMetaItem[]—
action

ProfileHoverCard: action slot (e.g. a Message button)

ReactNode—

Related

Platform docsAll componentsSource files