Hover Card

A composable hover card built on Base UI's PreviewCard primitive. It shows a positioned popup on hover with animated enter/exit transitions. Useful for displaying user profiles, link previews, or supplementary information without requiring a click.

Hover me

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

export default function HoverCardDemo() {
  return (
    <HoverCard>
      <HoverCardTrigger className="underline underline-offset-4 cursor-pointer">
        Hover me
      </HoverCardTrigger>
      <HoverCardContent>
        <p className="text-sm">This is a hover card with some content.</p>
      </HoverCardContent>
    </HoverCard>
  )
}

Anatomy

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

<HoverCard>
  <HoverCardTrigger>Hover me</HoverCardTrigger>
  <HoverCardContent>
    <p>Preview content goes here.</p>
  </HoverCardContent>
</HoverCard>

Examples

<HoverCard>
  <HoverCardTrigger render={<a href="/user/jens" />}>
    @jens
  </HoverCardTrigger>
  <HoverCardContent>
    <div className="flex gap-4">
      <Avatar>
        <AvatarImage src="/avatars/jens.png" />
        <AvatarFallback>J</AvatarFallback>
      </Avatar>
      <div className="flex flex-col gap-1">
        <p className="text-sm font-medium">Jens</p>
        <p className="text-sm text-muted-foreground">Building UI components.</p>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>

Custom positioning

Adjust side, sideOffset, align, and alignOffset to control where the card appears relative to the trigger.

<HoverCard>
  <HoverCardTrigger>Hover for info</HoverCardTrigger>
  <HoverCardContent side="right" align="start" sideOffset={8}>
    <p>This card appears to the right of the trigger.</p>
  </HoverCardContent>
</HoverCard>

API Reference

The root component that manages hover state and delay. Wraps Base UI's PreviewCard.Root.

Prop	Type	Default
`open`	`boolean`	—
`onOpenChange`	`(open: boolean) => void`	—
`children`	`ReactNode`	—

HoverCardTrigger

The element that activates the hover card on pointer enter. Wraps Base UI's PreviewCard.Trigger.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

HoverCardContent

The positioned popup that appears on hover. Handles portal, positioner, and popup internally.

Prop	Type	Default	Description
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	Which side of the trigger the card appears on.
`sideOffset`	`number`	`4`	Gap in pixels between the trigger and the card.
`align`	`"start" \| "center" \| "end"`	`"center"`	Horizontal alignment relative to the trigger.
`alignOffset`	`number`	`4`	Offset in pixels from the aligned edge.
`className`	`string`	—
`children`	`ReactNode`	—