Hover Card
A flat popup card that appears when hovering over a trigger element. Built on
Radix Hover Card, styled with a thick navy outline, pastel accents, and
tw-animate-css transitions.
hover-card-demo.app
Y2K
Installation
terminal.sh
npx y2kui@latest add hover-cardUsage
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@/components/ui/hover-card"The Hover Card is an uncontrolled component by default — it opens on hover
and closes when the cursor leaves. You can optionally control it with open
and onOpenChange.
<HoverCard>
<HoverCardTrigger asChild>
<Button variant="mint">Hover me</Button>
</HoverCardTrigger>
<HoverCardContent className="w-72">
<p>Content goes here.</p>
</HoverCardContent>
</HoverCard>Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state. |
defaultOpen | boolean | — | Initial open state (uncontrolled). |
onOpenChange | (open: boolean) => void | — | Callback when open state changes. |
openDelay | number | 700 | Delay in ms before opening on hover. |
closeDelay | number | 300 | Delay in ms before closing on hover leave. |
side | 'top' | 'right' | 'bottom' | 'left' | 'bottom' | Preferred side relative to the trigger. |
align | 'start' | 'center' | 'end' | 'center' | Alignment along the chosen side. |
sideOffset | number | 6 | Distance between the trigger and the card. |