Hover Card

Sighted-user preview that opens on pointer hover or keyboard focus, built on Radix primitives.

<HoverCard>  <HoverCardTrigger asChild>    <Button variant="link">@reva</Button>  </HoverCardTrigger>  <HoverCardContent className="w-72">    <VStack gap={2}>      <Text size="sm" weight="medium">Reva</Text>      <Text size="sm">        Intelligent private banking for business owners — design system primitives        built on shadcn/ui and Tailwind.      </Text>    </VStack>  </HoverCardContent></HoverCard>

Usage

import { HoverCard, HoverCardContent, HoverCardTrigger } from "@reva/ui";

HoverCardContent shares the anchored-panel surface treatment with PopoverContent and DropdownMenuContent (Family A — bg-popover/75 over the canvas, backdrop blur, shadow-md, ring-border-default) so floating panels read consistently across overlay patterns. Hover cards are sighted-user enhancements — pair the trigger with a meaningful link or button so keyboard and assistive-technology users still reach the underlying destination.

Composition

Use the following composition to build a HoverCard:

HoverCard
├── HoverCardTrigger
└── HoverCardContent

Examples

Basic

A hover card pairs a link or button trigger with a richer preview surface. Use it for profile previews, definitions, or any inline reference that's useful but not essential to the primary task.

<HoverCard>  <HoverCardTrigger asChild>    <Button variant="link">@reva</Button>  </HoverCardTrigger>  <HoverCardContent className="w-72">    <VStack gap={2}>      <Text size="sm" weight="medium">Reva</Text>      <Text size="sm">        Intelligent private banking for business owners — design system primitives        built on shadcn/ui and Tailwind.      </Text>    </VStack>  </HoverCardContent></HoverCard>

Sides

Use the side prop on HoverCardContent to set the preferred side relative to the trigger. Radix will flip the placement if there isn't enough room.

<HStack className="w-full max-w-3xl" justify="between">  <HoverCard>    <HoverCardTrigger asChild>      <Button variant="outline">Top</Button>    </HoverCardTrigger>    <HoverCardContent side="top">      <Text size="sm">Anchored above the trigger.</Text>    </HoverCardContent>  </HoverCard>  <HoverCard>    <HoverCardTrigger asChild>      <Button variant="outline">Right</Button>    </HoverCardTrigger>    <HoverCardContent side="right">      <Text size="sm">Anchored to the right of the trigger.</Text>    </HoverCardContent>  </HoverCard>  <HoverCard>    <HoverCardTrigger asChild>      <Button variant="outline">Bottom</Button>    </HoverCardTrigger>    <HoverCardContent side="bottom">      <Text size="sm">Anchored below the trigger.</Text>    </HoverCardContent>  </HoverCard>  <HoverCard>    <HoverCardTrigger asChild>      <Button variant="outline">Left</Button>    </HoverCardTrigger>    <HoverCardContent side="left">      <Text size="sm">Anchored to the left of the trigger.</Text>    </HoverCardContent>  </HoverCard></HStack>

Delay

Tune openDelay and closeDelay (ms) on HoverCard to control how eagerly the card appears and dismisses. Defaults are 700 / 300 — drop them to near-zero for tooltip-like previews, or raise them when the trigger sits in a busy region.

<HStack gap={4}>  <HoverCard openDelay={0} closeDelay={0}>    <HoverCardTrigger asChild>      <Button variant="outline">Instant</Button>    </HoverCardTrigger>    <HoverCardContent>      <Text size="sm">Opens and closes immediately.</Text>    </HoverCardContent>  </HoverCard>  <HoverCard openDelay={1200} closeDelay={600}>    <HoverCardTrigger asChild>      <Button variant="outline">Patient</Button>    </HoverCardTrigger>    <HoverCardContent>      <Text size="sm">Waits longer before opening and dismissing.</Text>    </HoverCardContent>  </HoverCard></HStack>

Props

Component	Prop	Type	Default	Description
HoverCard	`defaultOpen`	`boolean`	—	Uncontrolled initial open state.
HoverCard	`open`	`boolean`	—	Controlled open state.
HoverCard	`onOpenChange`	`(open: boolean) => void`	—	Called when open state changes.
HoverCard	`openDelay`	`number`	`700`	Delay (ms) before the card opens on hover.
HoverCard	`closeDelay`	`number`	`300`	Delay (ms) before the card closes after pointer leave.
HoverCardContent	`align`	`"start" \| "center" \| "end"`	`center`	Hover card alignment vs trigger.
HoverCardContent	`side`	`"top" \| "right" \| "bottom" \| "left"`	—	Preferred side; Radix may flip.
HoverCardContent	`sideOffset`	`number`	`4`	Distance from the anchor.
HoverCardContent	`className`	`string`	—	Merged onto the content surface.

Radix passthrough props on each part are supported; see the Hover Card primitives overview.