HoverCard

HoverCard previews the content behind a link when people point at it.

For mouse users who want a quick look at a profile, repository or document before opening it. The surface shares its classes with Popover (shadow-16, rounded-medium). Treat the content as supplementary, because keyboard and touch users may never see it.

The design was approved by @alex

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX

// npm install yugen-uiimport { HoverCard, HoverCardTrigger, HoverCardContent } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

yugen-ui/components

Delay, position & arrow

openDelay / closeDelay (ms), side, withArrow.

Usage

Use it to preview what's behind a link (profile, document, repository).
Keep the content short and easy to skim.

Don't

Don't put important actions only in a HoverCard. They are hard to reach by keyboard or touch.
Don't use it in place of Tooltip (short labels) or Popover (interactive content opened on click).

Props

Prop · Type	Default	Description
HoverCard.openDelay / closeDelaynumber	Default: 700 / 300	Open / close delay (ms).
HoverCard.open / onOpenChangeboolean / (open) => void	Default: —	Controls the open state.
HoverCardContent.side / align"top" \| "right" \| "bottom" \| "left" / "start" \| "center" \| "end"	Default: "bottom" / "center"	Position relative to the trigger.
HoverCardContent.withArrowboolean	Default: false	Shows the arrow.