Components · Overlays
Hover Card
shadcn's HoverCard that can load its content on intent: give it a load function and a cache key, and render the loading, loaded and error states.
Installation
npx shadcn@latest add https://www.syntaqx.com/r/hover-card.jsonChanges from shadcn
It installs over shadcn's Hover Card and keeps its API, variants and data-slots, so code written for it keeps working. On top of that:
- Opens after 120ms and closes after 100ms, tuned for previews, in place of Radix's 700/300.
- Keyboard focus on the trigger opens it too.
loadfetches the card's content the first time it opens, andcacheKeyshares the result across cards for the session. A failed load retries on the next open.- HoverCardContent's children can be a function of the load state (
idle,loading,success,error), anduseHoverCard()reads it anywhere inside. onOpenfires once, the first time the card opens.
Examples
Loading on intent: GitHub profiles
Anywhere a person appears, the page might want to show who they are, but fetching every profile up front wastes bandwidth and rate limit. Defer the fetch until the reader points at a name, and cache it per session so repeat hovers are instant.
Avatars as triggers
The same GitHubUser card behind a face instead of a name, as in an avatar stack or a reviewer list. The data comes from GitHub's public API, unauthenticated, so it's limited to 60 requests an hour per IP.
