Hover Card

For sighted users to preview content available behind a link.

Made by imskyleen
Edit on GitHub
Open in
Animate UI

Installation

Usage

<HoverCard>
  <HoverCardTrigger>Hover me</HoverCardTrigger>
  <HoverCardContent>
    <p>Hover card content</p>
  </HoverCardContent>
</HoverCard>

API Reference

HoverCard

Animate UI API Reference - HoverCard PrimitiveRadix UI API Reference - HoverCard.Root

HoverCardTrigger

Animate UI API Reference - HoverCard Trigger PrimitiveRadix UI API Reference - HoverCard.Trigger

HoverCardContent

Animate UI API Reference - HoverCard Content PrimitiveRadix UI API Reference - HoverCard.Content
PropTypeDefault
transition?
Transition
{ type: 'spring', stiffness: 300, damping: 25 }
...props?
HTMLMotionProps<"div">
-

The asChild and forceMount props are not supported in the HoverCardContent component as it is used for animation.

Credits

Built by Skyleen. The source code is available on GitHub.

Last updated: 10/4/2025