Hover Card

A preview card that appears on pointer hover.

Install

npx shadcn add @clearly/hover-card

Live Hover Card component — see usage below.

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

<HoverCard />

Every Clearly component also accepts glass (subtle·medium·strong), specular and className.

Prop	Type	Default	Description
`openDelay`	`number`	`700`	Ms before opening (Radix default).
`closeDelay`	`number`	`300`	Ms before closing (Radix default).
`align`	`"start" \| "center" \| "end"`	`"center"`	Content alignment.
`sideOffset`	`number`	`4`	Distance from trigger in px.
`glass`	`"Subtle" \| "Medium" \| "Strong"`	`"Medium"`	Glass depth of the card content.
`specular`	`boolean`	`true`	Directional specular highlight.
`radius`	`number`	`18`	Corner radius in px.