Hover Card
A floating card of preview detail shown on hover/focus of a trigger.
@garn/ui/hover-cardDefault
A profile preview card on a link trigger.
Installation
garn is copy-in — the garn CLI writes this component's source into your project, so you own and can edit it. It resolves any base files and installs the npm dependencies below for you.
npx garn-ui add hover-card- Registry
hover-card- Source
- hover-card.tsx
- Deps
@radix-ui/react-hover-card- Registry deps
utils
Import
import { HoverCard } from "@garn/ui/hover-card";Props
Generated from the component's TypeScript types.
No component-specific props — this is a thin wrapper over its native element.
Styling
Target these data-slots and remap these tokens to restyle without forking the component.
[data-slot="hover-card-content"]| Property | Token | Tier |
|---|---|---|
padding | --garn-pad-panel | semantic · air |
Overview
HoverCard previews supplementary detail when a user hovers or focuses a link or name — a profile card, a link preview, a definition peek. HoverCard owns open/close delays, HoverCardTrigger is the hovered element (keep it focusable), and HoverCardContent is the floating card. It's richer than a Tooltip (it can hold layout and media) but still passive and hover-driven — for content the user must click into, use a Popover.
Guidelines
Use it for a glanceable preview, never for essential content. Hover isn't available on touch and is easy to miss, so anything required must live in the page; the card only enriches. It's the step up from a Tooltip when the preview needs structure (an avatar, a few facts).
Keep it non-interactive and quick to dismiss. Don't put buttons or links users must reach inside a hover card — the open/close timing makes targeting fiddly; that's a Popover's job. Tune the delays so it doesn't flicker on incidental hovers.
Keep the trigger focusable and the content light. Wrap a real link/button so keyboard and AT users can reach the preview too, and keep the card concise — a peek, not a panel.
Best practices
- Use a focusable trigger (a link or button) so keyboard users can open it.
- Keep the content supplementary — never the only way to reach important info.
- Tune openDelay/closeDelay to match intent.
- Don't put essential or interactive-only content in a hover card.
- Don't rely on it on touch-first experiences.
- Don't use it where a plain text tooltip would do.
Content guidelines
- Keep the preview to supplementary detail — a summary, not essential or interactive content.
- Lead with the most useful fact; the card is a glance, not a page.
Accessibility
- Focus
- Opens on trigger focus as well as hover; not focus-trapped.
- • Radix opens the card on hover AND keyboard focus — so the trigger must be focusable (a link or button), not a bare span.
- • The content is supplementary; it isn't a modal and doesn't trap focus.
- • Hover has no touch equivalent — never make the card the only path to important content.
- Status
- Stable
- Version
v0.3.0- Introduced
v0.1.0
garn doesn't yet record a per-release version history. This reflects the component's current lifecycle state; full changelog entries will appear once the metadata pipeline emits a lifecycle.history field.