KQ-193 · HOVER/CARD
Hover Card
A rich preview that expands from an inline anchor. Hovering the trigger — or focusing it — floats a card in on a single overshoot with a small arrow; the pointer can cross into the card without it closing, and it retracts a beat after you leave. The card flips above the anchor when the space below runs short.
KQ-193 · HOVER/CARD
Last sweep signed off by before dawn.
Hover or focus the name
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/hover-card
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| trigger | ReactNode | — | Inline anchor — a link, name, or chip. |
| children | ReactNode | — | Rich card content; may be interactive. |
| side / align | top | bottom / start | center | end | — | Preferred placement; side flips when the viewport is tight. |
| openDelay / closeDelay | number | — | Hover open delay and the grace period before closing, in ms. |