Components

Hover Card

Reveals a floating preview of related content when the user hovers over a link or trigger — ideal for profile cards, footnotes, and inline detail.

Basic usage

Wrap a trigger in HoverCardTrigger and put the floating content in HoverCardContent. Hover the link below to preview.

Control placement with side and align on the content, and tune timing with openDelay on the root.

The content slot is unstyled inside — compose avatars, metadata, and actions freely, and widen it with className.

Prop	Type	Default	Description
`openDelay`	number	`700`	Milliseconds to wait after pointer enter before the card opens. Set on the root HoverCard.
`closeDelay`	number	`300`	Milliseconds to wait after pointer leave before the card closes. Set on the root HoverCard.
`defaultOpen`	boolean	`false`	Open state when initially rendered, for uncontrolled usage.
`open`	boolean	`—`	Controlled open state of the card.
`onOpenChange`	(open: boolean) => void	`—`	Called when the open state changes.
`asChild`	boolean	`false`	On HoverCardTrigger, merges props onto the child element instead of rendering an anchor.
`side`	'top' \| 'right' \| 'bottom' \| 'left'	`'bottom'`	Preferred side of the trigger to render the content against.
`align`	'start' \| 'center' \| 'end'	`'center'`	Alignment of the content relative to the trigger.
`sideOffset`	number	`4`	Distance in pixels between the content and the trigger.
`className`	string	`—`	Additional Tailwind classes merged onto HoverCardContent.

Hover cards are pointer-driven and supplementary — never put essential content or actions inside, since touch and keyboard-only users may not trigger them.
The card also opens on keyboard focus of the trigger and closes on blur or Escape, so keyboard users still receive the preview.
Use asChild to render a real focusable element (a link or Button) as the trigger so it stays in the tab order.
Open and close timing honour openDelay and closeDelay, preventing the card from flickering as the pointer passes over the trigger.