Vibe UI
Initializing Vibe UI System...
Vibe UI

Hover Card

Hover Card triggers context layouts when mouse is hovered.

Hover Card

Hover Card triggers context layouts when mouse is hovered.

Preview

@vibeui

Installation

pnpm dlx vibe-ui-kit@latest add hover-card

Examples

Explore layout variations — user profiles, product highlights, dictionary descriptions, code syntax definitions, server location monitors, and deployment checks.

SVSarah Vance
Vibe BundlebuildRegistry()London, UKneobrutalismDeployment status

Themes

Compare visual themes side-by-side.

@vibeuiGlass CardRetro CardGlow Card

Props

HoverCardContent

PropTypeDefaultDescription
variant'default' | 'glass' | 'retro' | 'glow''default'The visual aesthetic theme to apply to the content card.
align'start' | 'center' | 'end''center'The preferred alignment against the trigger.
sideOffsetnumber4The distance in pixels from the trigger.

Contributors

JS
Jenish Sabhadiya

Theme Customizer

8px
@theme {
  --radius: 0.5rem;
  --glass-blur: 8px;
}
Changes apply instantly to this documentation workspace.
Hover Card | Vibe UI