Hover Card

uistable

Hover Card — from shadcn/ui (radix-nova style).

npx shadcn add @krawma/hover-card

npm: radix-ui@^1.6.1 · registry: @krawma/utils

Preview

States

openclosed

Depends on

utils

Purpose

A rich preview card that appears on hover/focus of a trigger (e.g. a user handle → profile summary). For essential actions/content use popover (click); for short text hints use tooltip.

Anatomy

HoverCard › HoverCardTrigger › HoverCardContent.

Style

No variants — portalled token-backed surface. Content is richer than a tooltip (can include images/links).

Behavior & functionality

Opens on pointer hover (with open/close delays) and on keyboard focus of the trigger. Non-modal.

Accessibility

Because it's hover-triggered, its content must not be essential or the only path to information/actions — provide a click/keyboard path too.
The trigger should be a focusable element so keyboard users can reveal it.

Do / Don't

✅ Use for supplementary previews of a link/entity.
❌ Don't put required actions inside — hover content is unreachable for many users; use popover.