Hover Card

Shows a preview card when hovering over an element. Built on Base UI PreviewCard primitive.

Installation

npx shadcn add hover-card --registry https://ui.ch.sh/r

Usage

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

export default function Example() {
  return (
    <HoverCard>
      <HoverCardTrigger>Hover me</HoverCardTrigger>
      <HoverCardContent>
        Content here.
      </HoverCardContent>
    </HoverCard>
  )
}