Hover card
A preview that opens when the pointer rests on a link or keyboard focus reaches it. Keep anything essential on the page too, because touch screens never hover.
bunx --bun shadcn@4.17.0 add @waimakers/hover-card- npm dependencies
- @base-ui/react@1.9.0
From the registry
A raised contextual preview that opens on pointer hover or keyboard focus. Keep essential information in the page as well. Trigger delay and closeDelay remain configurable.
Examples
Colleague
Who someone is and what they own, behind their name.
Last changed by Tamar two hours ago.
Agent preview
An agent's purpose and status, without leaving the audit log.
weekly-digest posted to the team channel.
States
The focused trigger opens the card too. The ring is the shared text colour.