Hover Card

A compound component that displays a floating preview card when hovering over a trigger element, built on Base UI's PreviewCard primitive.

Default
@alexchen
Alignment

Align offset (side=bottom, align=start)

alignOffset=0alignOffset=8alignOffset=16alignOffset=24
Controlled
Hover or control me
State: closed
Placement
topbottomleftright
Rich Content

Recent articles

Understanding React Server ComponentsMaya Patel · 8 min readType-Safe APIs with tRPCJordan Lee · 5 min readCSS Container Queries in 2025Sam Rivera · 4 min read
With Delay
InstantShort (300ms)Default (600ms)Long (1000ms)

Installation

npx shadcn@latest add @byronwade/hover-card

Props

PropTypeDefaultDescription
side"top" | "bottom" | "left" | "right" | "inline-start" | "inline-end""bottom"Which side of the trigger the card appears on (HoverCardContent only).
sideOffsetnumber4Distance in pixels between the trigger and the card (HoverCardContent only).
align"start" | "center" | "end""center"Alignment of the card relative to the trigger (HoverCardContent only).
alignOffsetnumber4Offset in pixels along the alignment axis (HoverCardContent only).
classNamestring—Additional CSS class names to apply to the popup element (HoverCardContent only).