Design System/Atoms/Hover Card

Hover Card

Rich floating card revealed on hover, for previewing user profiles, links, and contextual details.

When To Use

  • Use Hover Card when you need a reusable atoms pattern instead of rebuilding the structure from primitives.
  • Start from the simplest example that fits the task, then add decoration only when it clarifies meaning or hierarchy.
  • Review the examples below to understand the tradeoffs between density, emphasis, and behavior.

When Not To Use

  • Do not use Hover Card just because it already exists in the catalog; choose the pattern that matches the task, not the most decorative option.
  • Do not keep layering options onto the pattern when a simpler component or section would be easier to understand and maintain.

Accessibility Notes

  • Move focus into the overlay when it opens and return focus to the trigger when it closes.
  • Support Escape to dismiss non-destructive overlays and ensure the trigger communicates expanded state where appropriate.
  • Do not hide critical actions behind hover-only disclosure; keyboard and touch users need equivalent access.

Key Props / API

Key exports

HoverCardRoot, HoverCardTrigger, HoverCardContent

Example Code

import {
  HoverCard, HoverCardTrigger, HoverCardContent,
} from "@hilum/ui"

<HoverCard>
  <HoverCardTrigger className="underline-offset-4 hover:underline cursor-pointer body text-brand-primary">
    @alexchen
  </HoverCardTrigger>
  <HoverCardContent>
    <div className="flex items-start gap-3">
      <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-brand-primary/10">
        <span className="label font-semibold text-brand-primary">AC</span>
      </div>
      <div className="min-w-0">
        <p className="subheading text-ground-900">Alex Chen</p>
        <p className="caption text-ground-400">@alexchen</p>
        <p className="caption mt-2 text-ground-500">
          Product designer building design systems and tools.
// ...trimmed for docs

Variants

User Profile

Hover over a username to reveal a profile card

@alexchen
The Future of Design Systems

Multiple Cards

Row of avatars — hover each to reveal a mini profile