Hover Card component

Rich preview (profile, product, clip) that opens after a hover delay or keyboard focus. The pointer can move into the card; supplementary only.

npx @kznlabs/labsui add hover-card

Springs tuned by and reviewed by the whole team.

import { Avatar } from "@/components/ui/avatar";import { HoverCard } from "@/components/ui/hover-card";export function UserMention({  name,  handle,}: {  name: string;  handle: string;}) {  return (    <HoverCard      content={        <div className="flex items-center gap-3">          <Avatar alt={name} />          <div className="grid">            <span className="font-semibold text-sm">{name}</span>            <span className="text-muted-foreground text-xs">@{handle}</span>          </div>        </div>      }    >      <a href={"/u/" + handle}>@{handle}</a>    </HoverCard>  );}

<HoverCard>

Preview card on hover or keyboard focus; the pointer can move into it. On touch the first tap opens it, the second acts.

children*
ReactNode
Usually a link (profile, product, clip).
content*
ReactNode
Rich preview: avatar, bio, stats. Supplementary only; the trigger must work without it.
aligndefault "center"
"start" | "center" | "end"
Alignment with the trigger.
closeDelaydefault 200
number
Time in ms before it closes once the pointer leaves.
openDelaydefault 600
number
Hover or focus time in ms before it opens.
sidedefault "bottom"
"top" | "bottom"
Preferred side; flips when there is no room.

Prop	Type	Default
`children*` Usually a link (profile, product, clip).	`ReactNode`	—
`content*` Rich preview: avatar, bio, stats. Supplementary only; the trigger must work without it.	`ReactNode`	—
`align` Alignment with the trigger.	`"start" \| "center" \| "end"`	`"center"`
`closeDelay` Time in ms before it closes once the pointer leaves.	`number`	`200`
`openDelay` Hover or focus time in ms before it opens.	`number`	`600`
`side` Preferred side; flips when there is no room.	`"top" \| "bottom"`	`"bottom"`

* required. Every component also takes className.