Hover Card

A preview of a link's destination, shown while a pointer rests on the link.

When to use

Use when: A preview of a linked thing on hover, such as a profile behind a name.
Avoid when: The content is needed to complete a task; hover isn't available on touch, so use Popover.

Installation

bunx shelf add hover-card

The source lands in src/components/ui/hover-card.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as HoverCard from "@/components/ui/hover-card";

<HoverCard.Root>
  <HoverCard.Trigger href="/customers/acme">Acme Inc.</HoverCard.Trigger>
  <HoverCard.Content>…</HoverCard.Content>
</HoverCard.Root>

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: foundations, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: In progress. See Designers and Figma.