HUD · Page · Tree
root/docs/primitives/hover-card

Hover Card

For sighted users to preview content available behind a link.

Demo

Hover over this text to see a hover card preview.

Usage

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

export function HoverCardDemo() {
  return (
    <HoverCard>
      <HoverCardTrigger>Hover me</HoverCardTrigger>
      <HoverCardContent>
        <div className="space-y-2">
          <h4 className="text-sm font-semibold">@nextjs</h4>
          <p className="text-sm">
            The React Framework for the Web
          </p>
          <div className="flex items-center pt-2">
            <span className="text-xs text-muted-foreground">
              2,543 stars
            </span>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}

API Reference

HoverCard

The root component that manages hover state.

HoverCardTrigger

The element that triggers the hover card.

HoverCardContent

The content that appears on hover.

All systems operational