Build · New

Hover Card

A read-only preview of what a link points to, shown while the pointer rests on it or it has focus.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/hover-card

Dependencies it brings: @base-ui/react, @phosphor-icons/react

Usage

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

<HoverCard>
  <HoverCardTrigger href="/people/noor">Noor Al-Hassan</HoverCardTrigger>
  <HoverCardContent>
    <HoverCardProfile name="Noor Al-Hassan" handle="@noor.designs" bio="Product designer in Amman." />
  </HoverCardContent>
</HoverCard>

Examples

A merchant, on top

side="top" on a transaction row. The domain stays left to right; the numbers follow the numerals setting.

API reference

HoverCardTrigger

Prop	Type	Default	Description
`href`	`string`		The link: it still navigates on click or tap.
`delay`	`number`	`500`	How long the pointer rests on the link before it opens (ms).
`closeDelay`	`number`	`300`	How long it stays after the pointer leaves the link and the card.
`render`	`ReactElement`		Your own link, e.g. Next's `<Link />`.

HoverCardContent

Prop	Type	Default	Description
`children`	`ReactNode`		Read-only content: no buttons, links or fields.
`side`	`"bottom" \| "top" \| "start" \| "end"`	`"bottom"`	Figma's Side. Flips when there isn't room.
`align`	`"start" \| "center" \| "end"`	`"center"`	Where it lines up along that side.
`arrow`	`boolean`	`true`	The arrow, pointing at the link.

HoverCardProfile

Prop	Type	Description
`name`	`string`	Figma's Name, and the avatar's initials.
`handle`	`string`	Figma's Handle: a handle or domain, left to right.
`src`	`string`	The photo; without it, the initials.
`bio`	`ReactNode`	Figma's Bio: about two lines.
`facts`	`{ icon?; label }[]`	Figma's Meta: short facts with an icon.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	Focusing the link opens it after the delay; leaving it closes it.
`Esc`	Closes it; focus stays on the link.
`Enter`	Follows the link.

ARIA

The card is a visual extra: everything in it is on the page the link opens, so screen reader users miss nothing.
Nothing interactive inside: it closes when the pointer or focus leaves the link.
On touch screens a tap follows the link.

Arabic and RTL notes

Mirrors

The avatar comes first: on the right, the text after it.
Facts start on the right, the icon before each label.

Does not mirror

Handles and domains (@noor.designs) stay left to right.
The location and calendar icons don't mirror.

Numerals: Years and counts in facts follow the numerals setting; format them with formatNumber.
Arabic typography: Name label-16 Semibold, handle label-14, bio body-14, facts label-12.
Mixed-direction text: The name goes in <bdi>, the handle in <bdi dir="ltr">, and the bio gets dir="auto" since it can be in either language.

All components ›