iconiq.

Registry Component

Hover Card

Inline hover card with delayed open and close timing, Slot-based custom triggers, and a spring-driven content panel.

Live Playground

Hover or focus the trigger to test the timing and anchored content behavior.

Hover or focus the trigger to inspect the local positioning, open and close delay, and spring entrance.

Install And Iterate

Install the component directly into your codebase, then branch into v0 if you want to iterate on variations.

Install

Build with v0

Send the registry bundle into v0 when you want to explore new colorways, copy, or layout directions quickly.

Usage

Compose the root, trigger, and content primitives together, then use the API details to tune timing, trigger composition, and panel behavior.

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

export function TeamHoverCard() {
  return (
    <HoverCard openDelay={120}>
      <HoverCardTrigger asChild>
        <button
          className="text-sm font-medium text-foreground underline-offset-4 decoration-transparent transition-[text-decoration-color] hover:underline hover:decoration-foreground focus-visible:underline focus-visible:decoration-foreground focus-visible:outline-none"
          type="button"
        >
          View profile
        </button>
      </HoverCardTrigger>
      <HoverCardContent className="w-80">
        <div className="space-y-2">
          <p className="font-medium">Edwin Vakayil</p>
          <p className="text-sm text-muted-foreground">
            @edwinvakayil · Design Engineer
          </p>
        </div>
      </HoverCardContent>
    </HoverCard>
  );
}

API Details

Each item below covers the documented props and the behavior that matters during implementation.