Hover Card
A popover that shows on hover or focus instead of click, for previewing content (a profile card, a link preview) without navigating away. Unlike a tooltip, it can contain interactive content.
Installation
CLI
Manual
- 1
Register the @fma-ui namespace in components.json (once)
components.json{ "registries": { "@fma-ui": "https://ui.fmartinsandre.dev.br/r/{name}.json" } } - 2
Add the item
pnpm dlx shadcn@latest add @fma-ui/hover-cardFiles land in
components/fma-ui/hover-card.tsx; npm and registry dependencies are installed along with them.
Dependencies
- npm
- cn@^0.4.0react-aria-components@^1.21.1
- Registry
- None