Hover Card

A rich preview card that appears on hover. Built on Radix UI HoverCard with scaleIn animation, configurable open/close delay, and arrow indicator.

Basic

A rich preview card that floats above content on hover. Ideal for user profiles, link previews, and contextual information panels. Built on Radix UI with a spring scaleIn entrance animation.

<HoverCard>
<HoverCardTrigger asChild>
  <Button variant="ghost" className="underline">
    @rjkashyap
  </Button>
</HoverCardTrigger>
<HoverCardContent>
  <div className="flex gap-3">
    <Avatar src="/avatars/rj.jpg" name="Rajeshwar Kashyap" className="size-10" />
    <div className="flex flex-col gap-1">
      <p className="text-sm font-semibold">Rajeshwar Kashyap</p>
      <p className="text-xs text-muted-foreground">@rjkashyap</p>
      <p className="text-xs mt-1 leading-5">
        Building Unified UI — a production-ready design system for React.
      </p>
      <div className="flex items-center gap-1 mt-1">
        <CalendarDays className="size-3 text-muted-foreground" />
        <span className="text-xs text-muted-foreground">Joined January 2025</span>
      </div>
    </div>
  </div>
</HoverCardContent>
</HoverCard>

<HoverCard><HoverCardTrigger asChild>  <Button variant="ghost" className="underline">    @rjkashyap  </Button></HoverCardTrigger><HoverCardContent>  <div className="flex gap-3">    <Avatar src="/avatars/rj.jpg" name="Rajeshwar Kashyap" className="size-10" />    <div className="flex flex-col gap-1">      <p className="text-sm font-semibold">Rajeshwar Kashyap</p>      <p className="text-xs text-muted-foreground">@rjkashyap</p>      <p className="text-xs mt-1 leading-5">        Building Unified UI — a production-ready design system for React.      </p>      <div className="flex items-center gap-1 mt-1">        <CalendarDays className="size-3 text-muted-foreground" />        <span className="text-xs text-muted-foreground">Joined January 2025</span>      </div>    </div>  </div></HoverCardContent></HoverCard>

Installation

Install the component via the CLI in one command.

npx @work-rjkashyap/unified-ui add hover-card

pnpm dlx @work-rjkashyap/unified-ui add hover-card

npx @work-rjkashyap/unified-ui add hover-card

bunx @work-rjkashyap/unified-ui add hover-card

If you haven't initialized your project yet, run npx @work-rjkashyap/unified-ui init first. See the CLI docs for details.

Or install the full package

Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.

npm install @work-rjkashyap/unified-ui

pnpm add @work-rjkashyap/unified-ui

yarn add @work-rjkashyap/unified-ui

bun add @work-rjkashyap/unified-ui

Anatomy

import {
	HoverCard,
	HoverCardTrigger,
	HoverCardContent,
	Avatar,
	Button,
	Badge,
} from "@work-rjkashyap/unified-ui";

Wrap a trigger in HoverCardTrigger and your preview content in HoverCardContent. The card opens after a 200ms delay and closes after 150ms — preventing accidental triggers from quick cursor passes.

<HoverCard>
	<HoverCardTrigger asChild>
		<a href="/profile" className="underline text-primary">
			@username
		</a>
	</HoverCardTrigger>
	<HoverCardContent>
		<p className="text-sm">Preview content goes here.</p>
	</HoverCardContent>
</HoverCard>

Placement

Use the side and align props on HoverCardContent to control where the card appears relative to the trigger.

<HoverCardContent side="top" align="center">...</HoverCardContent>
<HoverCardContent side="bottom" align="center">...</HoverCardContent>
<HoverCardContent side="left" align="center">...</HoverCardContent>
<HoverCardContent side="right" align="center">...</HoverCardContent>

<HoverCardContent side="top" align="center">...</HoverCardContent><HoverCardContent side="bottom" align="center">...</HoverCardContent><HoverCardContent side="left" align="center">...</HoverCardContent><HoverCardContent side="right" align="center">...</HoverCardContent>

`side`	Position
`top`	Above the trigger
`bottom`	Below the trigger (default)
`left`	To the left of the trigger
`right`	To the right of the trigger

`align`	Alignment along the cross axis
`start`	Aligned to the start edge of the trigger
`center`	Centered against the trigger (default)
`end`	Aligned to the end edge of the trigger

Open & Close Delay

Control how long the user must hover before the card opens (openDelay) and how long before it closes when the cursor leaves (closeDelay).

{
	/* Opens quickly, stays open longer */
}
<HoverCard openDelay={100} closeDelay={300}>
	<HoverCardTrigger asChild>
		<span className="underline cursor-help">Quick open</span>
	</HoverCardTrigger>
	<HoverCardContent>
		<p className="text-sm">Opens after 100ms, closes after 300ms.</p>
	</HoverCardContent>
</HoverCard>;

{
	/* Default delays */
}
<HoverCard openDelay={200} closeDelay={150}>
	...
</HoverCard>;

The delay prevents the card from flickering when the cursor briefly passes over the trigger while moving to other elements.

A rich user profile preview — the most common HoverCard pattern.

Posted by · 2 hours ago

<HoverCard>
<HoverCardTrigger asChild>
  <button className="text-primary font-medium underline">
    @alex_dev
  </button>
</HoverCardTrigger>
<HoverCardContent side="bottom" align="start">
  <div className="flex gap-3">
    <Avatar src="/avatars/alex.jpg" name="Alex Dev" className="size-12" />
    <div className="flex flex-col gap-1">
      <div className="flex items-center gap-2">
        <p className="text-sm font-semibold">Alex Dev</p>
        <Badge variant="primary" size="sm">Pro</Badge>
      </div>
      <p className="text-xs text-muted-foreground">@alex_dev</p>
      <p className="text-xs mt-1.5 leading-5">
        Full-stack engineer. Building with React and TypeScript.
      </p>
      <div className="flex items-center gap-1.5 text-xs text-muted-foreground mt-2">
        <MapPin className="size-3" />
        <span>San Francisco, CA</span>
      </div>
      <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
        <CalendarDays className="size-3" />
        <span>Joined March 2022</span>
      </div>
    </div>
  </div>
</HoverCardContent>
</HoverCard>

<HoverCard><HoverCardTrigger asChild>  <button className="text-primary font-medium underline">    @alex_dev  </button></HoverCardTrigger><HoverCardContent side="bottom" align="start">  <div className="flex gap-3">    <Avatar src="/avatars/alex.jpg" name="Alex Dev" className="size-12" />    <div className="flex flex-col gap-1">      <div className="flex items-center gap-2">        <p className="text-sm font-semibold">Alex Dev</p>        <Badge variant="primary" size="sm">Pro</Badge>      </div>      <p className="text-xs text-muted-foreground">@alex_dev</p>      <p className="text-xs mt-1.5 leading-5">        Full-stack engineer. Building with React and TypeScript.      </p>      <div className="flex items-center gap-1.5 text-xs text-muted-foreground mt-2">        <MapPin className="size-3" />        <span>San Francisco, CA</span>      </div>      <div className="flex items-center gap-1.5 text-xs text-muted-foreground">        <CalendarDays className="size-3" />        <span>Joined March 2022</span>      </div>    </div>  </div></HoverCardContent></HoverCard>

Link Preview

Show a preview card for external or internal links on hover.

<HoverCard>
<HoverCardTrigger asChild>
  <a href="/docs" className="text-primary underline">
    Unified UI Documentation →
  </a>
</HoverCardTrigger>
<HoverCardContent side="top" align="start" className="w-72">
  <div className="flex flex-col gap-2">
    <div className="flex items-center gap-2">
      <div className="size-8 rounded-md bg-primary/10 flex items-center justify-center">
        <Link2 className="size-4 text-primary" />
      </div>
      <div>
        <p className="text-sm font-semibold">Unified UI</p>
        <p className="text-xs text-muted-foreground">unified-ui.dev/docs</p>
      </div>
    </div>
    <p className="text-xs text-muted-foreground leading-5">
      Production-ready React design system with 40+ components.
    </p>
  </div>
</HoverCardContent>
</HoverCard>

<HoverCard><HoverCardTrigger asChild>  <a href="/docs" className="text-primary underline">    Unified UI Documentation →  </a></HoverCardTrigger><HoverCardContent side="top" align="start" className="w-72">  <div className="flex flex-col gap-2">    <div className="flex items-center gap-2">      <div className="size-8 rounded-md bg-primary/10 flex items-center justify-center">        <Link2 className="size-4 text-primary" />      </div>      <div>        <p className="text-sm font-semibold">Unified UI</p>        <p className="text-xs text-muted-foreground">unified-ui.dev/docs</p>      </div>    </div>    <p className="text-xs text-muted-foreground leading-5">      Production-ready React design system with 40+ components.    </p>  </div></HoverCardContent></HoverCard>

Custom Width

The default card width is w-64 (256px). Override it with a className on HoverCardContent.

{
	/* Narrower */
}
<HoverCardContent className="w-48">...</HoverCardContent>;

{
	/* Wider — for rich content */
}
<HoverCardContent className="w-80">...</HoverCardContent>;

{
	/* Auto width based on content */
}
<HoverCardContent className="w-auto">...</HoverCardContent>;

Side Offset

Use sideOffset to control the gap between the trigger and the card.

{
	/* Default: 8px gap */
}
<HoverCardContent sideOffset={8}>...</HoverCardContent>;

{
	/* Tighter: 4px gap */
}
<HoverCardContent sideOffset={4}>...</HoverCardContent>;

{
	/* More breathing room: 12px gap */
}
<HoverCardContent sideOffset={12}>...</HoverCardContent>;

Props

Prop	Type	Default	Description
`openDelay`	`number`	`200`	Milliseconds before the card opens after hover.
`closeDelay`	`number`	`150`	Milliseconds before the card closes after cursor leaves.
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	—	Initial open state (uncontrolled).
`onOpenChange`	`(open: boolean) => void`	—	Callback when the open state changes.

HoverCardTrigger

Uses Radix UI's HoverCardTrigger API. Use asChild to render the trigger as your own element (a <button>, <a>, or any other element).

HoverCardContent

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Which side of the trigger to render the card on.
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment along the cross-axis.
`sideOffset`	`number`	`8`	Pixel gap between the trigger and the card.
`className`	`string`	—	Additional CSS classes (use to override width, padding, etc.).
`children`	`ReactNode`	—	The preview content rendered inside the card.

All other HoverCardContent props are forwarded to the underlying Radix HoverCardContent element.

Motion

Open — Uses the scaleIn preset: scale: 0.92 → 1, opacity: 0 → 1 with a spring (stiffness: 300, damping: 24, mass: 0.8).
Close — Reverses the scaleIn animation.
Arrow — The arrow indicator is rendered by Radix UI and inherits the card's position automatically.
All animations respect prefers-reduced-motion via useReducedMotion() — falls back to a simple opacity transition.

Accessibility

Built on @radix-ui/react-hover-card — fully WAI-ARIA compliant.
The HoverCard is triggered on hover (pointer) and focus (keyboard users can tab to the trigger to see the card).
The card content is in a portal, rendered at the document body level, ensuring proper z-index stacking above all page content.
HoverCardTrigger asChild preserves the semantics of the host element — an <a> remains an <a>, a <button> remains a <button>.
The card is not role="dialog" — it is supplementary preview content, not a focus trap. Do not put critical actions inside a HoverCard.
Avoid placing interactive elements (buttons, forms) inside a HoverCard. If interaction is needed, use a Popover instead.

Component	Trigger	Content	Interactive	Use Case
`Tooltip`	Hover/Focus	Short text label	No	Brief descriptions for icons/buttons
`HoverCard`	Hover/Focus	Rich preview	No*	Profile previews, link previews
`Popover`	Click	Rich UI	Yes	Filters, settings, date pickers

*Avoid interactive elements in HoverCard — use Popover for interactive content.

Design Tokens

Token	Usage
`--popover`	Card background color
`--popover-fg`	Card text color
`--border`	Card border color
`--radius-lg`	Card border radius
`--shadow-lg`	Card drop shadow
`--z-popover`	Z-index for the floating card