Hover Card
A rich preview card that opens when hovering or focusing a trigger. Built on Radix UI with configurable open and close delays, smart positioning, and directional animations. Distinct from Hover Card 3D, which is a tilt-effect component.
Pro features
What the Pro version adds to this component.
Tunable Timing
openDelay and closeDelay props let you balance instant previews against accidental flashes
Smart Positioning
side, align, and offset controls with automatic collision avoidance near viewport edges
Directional Animations
Fade, zoom, and side-aware slide transitions driven by data-state and data-side attributes
Hover and Focus Triggering
Opens for pointer hover and keyboard focus alike, with Escape to dismiss
Theme-Aware Surface
Styled with popover design tokens so cards match your theme in light and dark mode
Always on Top
Elevated stacking context keeps previews above surrounding layout and sticky elements
Installation
Install via CLI
npx @moontra/moonui-cli add hover-cardUsage
Examples
User Profile Preview
Preview a team member without leaving the page, the classic mention-hover pattern.
Custom Open and Close Delays
Tune openDelay and closeDelay on the root to balance responsiveness against accidental triggering.
Positioning
Place the card on any side of the trigger with side and align; collisions are avoided automatically.
Inline Link Preview
Give inline links a rich preview so readers can peek at the destination without navigating.