A preview of a link's destination for pointer and keyboard users, built on Base UI Preview Card.
Motion signature: opens with intent after a 300ms dwell, stays open while the pointer travels into it, and an Eased Avatar inside fades in from a 4px blur only once its image has loaded, so initials never flash.
Usage
import { HoverCard, HoverCardTrigger, HoverCardContent } from "@/components/eased/hover-card/hover-card";
import { Avatar } from "@/components/eased/avatar/avatar";
<HoverCard>
<HoverCardTrigger variant="mention" href="/people/mara">@mara</HoverCardTrigger>
<HoverCardContent>
<Avatar name="Mara Lindqvist" src="/mara.jpg" size="xl" />
…
</HoverCardContent>
</HoverCard>The card is hidden from screen readers by design: keep its content supplementary and available at the link's destination. Give the trigger an href so it is focusable; keyboard focus opens the card too.
Props
HoverCard: Base UIPreviewCard.Root(open,defaultOpen,onOpenChange…).HoverCardTrigger: renders an<a>.variant:"link"(default, underlined),"mention"(an @-chip) or"unstyled";delay(300),closeDelay(300).HoverCardContent:side("bottom"),align("start"),sideOffset(8),alignOffset,motion,container,zIndex(50),className(defaultw-72).