Skip to content

Hover Card

A preview of where a link goes, for mouse and keyboard users. It never opens on touch, so everything in it is also on the linked page.

Sourcecomponents/hover-card.tsx

@ada moved the Checkout redesign brief to review. Rest the pointer on a link, or tab to it.

Usage

Hover Card usage
import { Avatar } from "@/components/avatar";import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/hover-card";
export function HoverCardUsage() {  return (    <HoverCard>      <HoverCardTrigger href="/people/ada">@ada</HoverCardTrigger>      <HoverCardContent>        <div className="flex gap-3">          <Avatar alt="Ada Lovelace" />          <div>            <p className="font-medium">Ada Lovelace</p>            <p className="text-body-sm text-text-secondary">Owner of 4 projects</p>          </div>        </div>      </HoverCardContent>    </HoverCard>  );}

When to use

Use when

A preview of where a link goes (a person, a project) for mouse and keyboard users. Everything in it must also be on the linked page

Don’t use when

Actions or anything essential: it never opens on touch and screen readers skip it (use Popover)