Hover Card
A floating card of preview detail shown on hover/focus of a trigger.
@garn/ui/hover-cardOn this page
Default
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- Deps
@radix-ui/react-hover-card- Registry deps
utilsframe
Import
import { HoverCard, HoverCardTrigger, HoverCardContent } from "@garn/ui/hover-card";Anatomy
The parts this component is built from — compose them to assemble it.
HoverCardRequiredRoot — owns the open state and openDelay/closeDelay.
HoverCardTriggerRequired[data-slot="hover-card-trigger"]The hovered/focused element (asChild to wrap a link or button — keep it focusable).
HoverCardContentRequired[data-slot="hover-card-content"]The floating preview card (popover-positioned).
Props
The component's public props and their types.
No component-specific props — this is a thin wrapper over its native element.
Styling
Target these data-slots and states, and remap these tokens, to restyle without forking the component.
[data-slot="hover-card-content"]States
| Selector | State | Description |
|---|---|---|
[data-state=open] | open | Card mounted + animated in. |
[data-state=closed] | closed | Animating out before unmount. |
| Property | Token | Tier |
|---|---|---|
padding | --garn-pad-panel | semantic · air |
When to use
Preview supplementary detail when hovering/focusing a link or name — a user/profile card, a link preview, a definition peek.
Reach for something else when
- Essential info or actions a user must reach (put it inline or use popover)
- a short text hint (use tooltip)
- a click-triggered surface (use popover / dropdown-menu)
- touch-first flows.
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.
The surface is solid by default. A hover card floats over ordinary page content, so it opens as a solid, opaque card. The frosted appearance="glass" treatment stays available as an opt-in — a nice fit for a rich media preview — but reach for it deliberately rather than relying on it as the default.
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.
Troubleshooting
Keyboard or touch users never see the card.
Cause. The trigger isn't focusable (a bare span), or the flow is touch-first.
Fix. Use a focusable trigger (link/button) and keep the content non-essential — or switch to popover.
The card looks frosted/translucent and slightly muddy over the page.
Cause. An older build defaulted to the glass frosted surface; a card over ordinary page content has no dimmed backdrop for the frost to read against.
Fix. The surface is solid by default now — leave appearance unset. Opt into appearance="glass" only when the frost is wanted (e.g. a rich media preview).
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.