Hover Card

Installation#

$ pnpm dlx shadcn@latest add https://www.prfct.dev/r/hover-card.json

Usage#

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"

<HoverCard>
  <HoverCardTrigger href="/people/grace">@grace</HoverCardTrigger>
  <HoverCardContent>{/* profile preview */}</HoverCardContent>
</HoverCard>

HoverCardTrigger renders a real <a>: the preview is an enhancement of a link that works on its own. It's built on the Base UI Preview Card.

Examples#

Issue preview#

References to issues, pull requests and documents are good candidates: the card answers what is this and is it done? without a click. Keep it to identity, status, and one or two lines of context.

Link preview#

Preview where an external link leads before people commit to leaving the page. Here the card opens above the link (side="top") and uses a tinted footer for metadata.

Delay#

delay (600ms by default) and closeDelay (300ms) on the trigger decide how intentional a hover must be. Long delays prevent cards from flashing as the pointer crosses a page; short ones suit dense lists that people scan on purpose.

Guidelines#

When to use#

• To preview the destination of a link: a person, an issue, a repository, a document.
• When the preview helps people decide whether to navigate, without making them navigate.

When not to use#

• For essential information — hover cards are invisible on touch devices and easy to miss. Put it on the page.
• For interactive tasks — use a Popover, which opens on click and can hold forms.
• For a one-line label — use a Tooltip.

A preview, not a page#

The card should confirm this is what you're looking for. If you find yourself adding tabs, lists or several actions, link to a page instead.

Accessibility#

A hover card is a visual enhancement for sighted pointer and keyboard users. It opens when the link is hovered and when it receives keyboard focus, but it isn't announced and the link doesn't reference it, so screen reader users experience the link on its own. Treat the card as optional context.

• The link must stand on its own. Its text should say where it goes; the card only adds context.
• Don't hide essentials in it. Anything people must know or do can't live only in a hover card.
• Hoverable. Moving the pointer from the link onto the card keeps it open, within the closeDelay.

API reference#

HoverCard#

The root. Doesn't render an element. Accepts every prop of Base UI PreviewCard.Root.

HoverCardTrigger#

The link that opens the card. Renders an <a> and accepts every anchor attribute.

HoverCardContent#

Renders the portal, positioner and popup.