Hover card

Preview a person or link on hover or focus without leaving the page.

$npx shadcn@latest add @silicon-ui/hover-card

previewpeoplepopover

Installation

$npx shadcn@latest add @silicon-ui/hover-card

Install the dependencies.
$npm install @radix-ui/react-popover motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/hover-card/hover-card.tsx
- components/silicon-ui/hover-card/hover-card.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { HoverCard } from "@/components/silicon-ui/hover-card/hover-card";

Prop	Type	Default
`children*` The trigger, such as a mention button or a link. It must accept a ref and be focusable.	`ReactElement`	—
`content*` The preview. `HoverCardProfile` covers people; any read only content works.	`ReactNode`	—
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`
`align`	`"start" \| "center" \| "end"`	`"start"`
`openDelay` Milliseconds of hover before the first card opens.	`number`	`OPEN_DELAY`
`closeDelay` Milliseconds of grace after the pointer leaves, so it can travel into the card.	`number`	`CLOSE_DELAY`
`className`	`string`	—

Prop	Type	Default
`name*`	`string`	—
`role` Role and team, such as "Product designer, Payments".	`string`	—
`avatar` A portrait URL, or your own image element such as next/image. Initials show when it is missing.	`string \| ReactNode`	—
`bio`	`string`	—
`stats`	`HoverCardStat[]`	`[]`
`meta` A footer line, such as a location and local time.	`ReactNode`	—