Hover Card

A hover card component built on Radix UI for displaying rich content when hovering over a trigger element.

Installation

npx shadcn@latest add https://nteract-elements.vercel.app/r/hover-card.json

Install the dependencies:

npm install radix-ui

Copy from the nteract/elements registry.

Usage

import {
  HoverCard,
  HoverCardTrigger,
  HoverCardContent,
} from "@/registry/primitives/hover-card"

export function Example() {
  return (
    <HoverCard>
      <HoverCardTrigger>Hover me</HoverCardTrigger>
      <HoverCardContent>
        Additional information appears here.
      </HoverCardContent>
    </HoverCard>
  )
}

Basic Example

Hover over me

<HoverCard>
  <HoverCardTrigger asChild>
    <span className="underline cursor-pointer">Hover over me</span>
  </HoverCardTrigger>
  <HoverCardContent>
    <p className="text-sm">This is the hover card content.</p>
  </HoverCardContent>
</HoverCard>

With Avatar

<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="link">@jupyter</Button>
  </HoverCardTrigger>
  <HoverCardContent className="w-80">
    <div className="flex justify-between space-x-4">
      <Avatar>
        <AvatarImage src="https://github.com/jupyter.png" />
        <AvatarFallback>JP</AvatarFallback>
      </Avatar>
      <div className="space-y-1">
        <h4 className="text-sm font-semibold">@jupyter</h4>
        <p className="text-sm">Jupyter is a large umbrella project...</p>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>

Props

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state
`defaultOpen`	`boolean`	`false`	Default open state
`onOpenChange`	`(open: boolean) => void`	—	Called when open state changes
`openDelay`	`number`	`700`	Delay before opening (ms)
`closeDelay`	`number`	`300`	Delay before closing (ms)

HoverCardTrigger

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child element
`className`	`string`	—	Additional CSS classes

HoverCardContent

Prop	Type	Default	Description
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment relative to trigger
`sideOffset`	`number`	`4`	Distance from trigger (px)
`className`	`string`	—	Additional CSS classes

Hover Card

On this page