Overlay
Hover Card
Rich preview card that appears on hover. Ideal for user profiles and link previews.
Install
pnpm add @codefast/ui
Import path
@codefast/ui/hover-card
Examples
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import {
HoverCard, HoverCardTrigger, HoverCardContent,
} from "@codefast/ui/hover-card";
<HoverCard>
<HoverCardTrigger asChild>…</HoverCardTrigger>
<HoverCardContent>…</HoverCardContent>
</HoverCard>
API reference
Props for each part of the component. All native element props are also forwarded.
HoverCard
Root. Opens on hover/focus of the trigger.
| Prop | Type | Default | Description |
|---|---|---|---|
| openDelay | number | 700 | Milliseconds to hover before opening. |
| closeDelay | number | 300 | Milliseconds before closing after the pointer leaves. |
HoverCardContent
| Prop | Type | Default | Description |
|---|---|---|---|
| side / align | "top"|"right"|"bottom"|"left" / "start"|"center"|"end" | — | Placement relative to the trigger. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
- Opens on hover and on keyboard focus of the trigger.
- Content is supplementary — never put essential info or actions only here.
- Touch devices don’t hover; ensure the same info is reachable another way.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Use for non-essential previews — profiles, link cards.
- Keep the trigger a real link or button.
Don’t
- Don’t put interactive controls inside — use a Popover.
- Don’t hide critical content behind hover.