Components

Hover card

Radix panel that opens on hover. Richer than a Tooltip — supports full JSX content (title, avatar, description, actions). Use for previews you want to reveal on hover without a click.

Updated Jul 10, 2026 by Leonardo Posada

Variants

<HoverCard>
  <HoverCardTrigger asChild><Button variant="link">@julian</Button></HoverCardTrigger>
  <HoverCardContent>
    <div className="flex items-start gap-3">
      <Avatar><AvatarFallback>J</AvatarFallback></Avatar>
      <div>
        <p className="text-sm font-semibold">Julián Núñez</p>
        <p className="text-xs text-muted-foreground">Product Designer · Yuno</p>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>

When to use

  • User previews on hover of a mention or avatar.
  • Rule / preset previews on hover of a badge or chip.

When not to use

  • For plain text hints — use Tooltip.
  • For critical information — the user must click to reveal, not hover.

Usage

Do
  • Keep the panel under 300px wide.
  • Anchor to a real trigger, always.
Don't
  • Don't nest interactive controls that require multi-step interaction — hover cards close easily.