HoverCard

Radix

Animated

A Radix-based card that appears when hovering over a trigger element. Useful for preview popups showing user profiles, link previews, or entity summaries.

Overlayshoverpreviewcardpopup

SimpleHoverCard

import { SimpleHoverCard } from '@primstack/ui/hover-card'

<SimpleHoverCard content={<div>User profile info</div>}>
  <span>@username</span>
</SimpleHoverCard>

User profile preview

import { HoverCard, HoverCardTrigger, HoverCardContent } from '@primstack/ui'

<HoverCard>
  <HoverCardTrigger asChild><a href="#">@alice</a></HoverCardTrigger>
  <HoverCardContent>
    <Avatar src="/alice.jpg" />
    <Text weight="semibold">Alice Johnson</Text>
    <Text size="sm" color="muted">Senior Engineer</Text>
  </HoverCardContent>
</HoverCard>

Related Components