Hover Card
HoverCard Primitive
Headless, unstyled hover card primitive with positioning and delay controls.
AsChild Pattern
Use AsChild to compose triggers with your own styled elements.
Without AsChild
HoverCardTriggerPrimitive renders its own div element.
Hover me
With AsChild
Button receives hover/focus behavior via TriggerContext.
Basic Usage
Hover over the trigger to show the hover card. Content appears after a delay.
Hover me
Custom Delays
Control the open and close delays in milliseconds.
Quick (200ms)
Slow (1000ms)
Positioning
Control where the hover card appears relative to the trigger.
Top
Right
Accessibility Features
Interaction and ARIA support.
Included by default
Hover/focus open behavior, delayed close behavior,
role="dialog", and aria-describedby support.
When to Use Primitives
Choose between primitives and styled components based on your needs.
Use HoverCard Primitive
- ✓Building a custom design system
- ✓Need complete control over styling
- ✓Want to apply your own CSS framework
- ✓Creating unique visual designs
Use Styled Component
- ●Want shadcn/ui design out of the box
- ●Need quick implementation
- ●Like the default styling
- ●Prefer convention over configuration