ComponentsOverlays & feedback
A rich preview when the pointer rests on a name or link: an author, a CRM contact, an @mention. Extra information for mouse users only.
Radix Hover Card components/hover-card.tsx, lib/floating-arrow.tsxtheme · material · accent · density · font
Written by Leyla Aksoy · 6 min read
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 { HoverCard, HoverCardTrigger, HoverCardContent } from "@vamos-ui/react";
<HoverCard>
<HoverCardTrigger href="/contacts/482">Amelia Hart</HoverCardTrigger>
<HoverCardContent>…</HoverCardContent>
</HoverCard>Hover cards don't open from the keyboard or on touch. The same details must be reachable on the link target (the contact page, the author page).
Don't put actions that exist nowhere else inside a hover card; use Popover for interactive content.
Examples
Entity preview with loading
Fetch on first open in onOpenChange and show Skeleton meanwhile — a CRM contact card.
Deal owner:Amelia Hart
Mentions in a comment
Shorter delay and an arrow for @mentions in an HR comment thread.
API
HoverCard
| Prop | Type | Default |
|---|---|---|
openDelayHover time before it opens (ms). | number | 500 |
closeDelayTime before it closes after the pointer leaves (ms). | number | 150 |
open / defaultOpen / onOpenChangeControlled or uncontrolled. Fetch data in onOpenChange. | boolean / boolean / (open) => void | — |
HoverCardTrigger
| Prop | Type | Default |
|---|---|---|
hrefRenders an <a>. Use asChild for a router Link. | string | — |
asChildMerge onto your own element. | boolean | false |
HoverCardContent
| Prop | Type | Default |
|---|---|---|
sizeWidth: 256 or 320 px. | "sm" | "md" | "md" |
arrowPointer arrow. | boolean | false |
side / alignPreferred placement; flips on collision. | Radix placement | "bottom" / "center" |
sideOffsetGap to the trigger in px. | number | 8 |