Components
Hover Card
A preview panel that opens on hover for sighted users to peek at content behind a link, built on Radix UI.
Install
npx shadcn@latest add https://atomx.acau.net/r/hover-card.jsonUsage
Wrap a trigger with HoverCardTrigger and put the preview content in HoverCardContent. The panel opens on hover/focus and closes on blur or pointer leave — keyboard users get the same content via focus. Don't rely on hover-only triggers for critical information; pair with a clickable link for accessibility.
<HoverCard>
<HoverCardTrigger asChild>
<Button variant="link">@atomx</Button>
</HoverCardTrigger>
<HoverCardContent>
Preview content here.
</HoverCardContent>
</HoverCard>Preview
User card
Props
HoverCard extends React.ComponentProps<typeof HoverCardPrimitive.Root>.
| Prop | Type | Notes |
|---|---|---|
open | boolean | Controlled open state. |
defaultOpen | boolean | Initial state when uncontrolled. |
onOpenChange | (open: boolean) => void | Fired when open state changes. |
openDelay | number | Delay before opening on hover, in ms. Defaults to 700. |
closeDelay | number | Delay before closing on hover leave, in ms. Defaults to 300. |
HoverCardContent extends React.ComponentProps<typeof HoverCardPrimitive.Content>.
| Prop | Type | Notes |
|---|---|---|
align | "start" | "center" | "end" | Horizontal alignment. Defaults to "center". |
sideOffset | number | Gap between trigger and panel. Defaults to 4. |
side | "top" | "right" | "bottom" | "left" | Preferred opening side. |