Hover Card

Powered by

Base UIShadcn UIAnimate UIMotion

Installation

Positioning

When to use

Use this decision tree to determine when to use the Hover Card component:

Usage

<HoverCard>
  <HoverCardTrigger>Hover Card Trigger</HoverCardTrigger>
  <HoverCardContent>Hover Card Content</HoverCardContent>
</HoverCard>

Props

Animate UI Props

HoverCardContent

Keyboard interactions

Accessibility

• Hover cards are supplementary — put the same content on the page in an accessible form (link target, expandable section) so touch and reduced-motion users aren't excluded.
• The trigger must be a focusable element (<a href> is typical since hover cards preview links). Use asChild to render the trigger as whatever semantic element you need.
• Content is wired via aria-describedby so screen readers announce the preview when the trigger has focus.
• Prefer Popover when the content contains interactive controls — hover cards auto-close on leave and interactive content becomes difficult to reach.

Controlled vs uncontrolled

Uncontrolled — typical case, hover cards time their own open/close:

<HoverCard>
  <HoverCardTrigger asChild><a href="/users/bm">@malinskibeniamin</a></HoverCardTrigger>
  <HoverCardContent>{/* preview card */}</HoverCardContent>
</HoverCard>

Controlled — force open/closed for demos or during a guided tour:

const [open, setOpen] = useState(false);

<HoverCard open={open} onOpenChange={setOpen}>
  <HoverCardTrigger asChild><a href="/users/bm">@malinskibeniamin</a></HoverCardTrigger>
  <HoverCardContent>{/* preview card */}</HoverCardContent>
</HoverCard>

Credits

• We use Base UI for the hover card component.
• We take our inspiration from Shadcn UI for the hover card style.
• We use Animate UI from imskyleen for all the animations.