Hover Card
For sighted users to preview content available behind a link.
Loading example…
Installation
bunx --bun shadcn@latest add @sui/hover-cardInstall with the shadcn CLI or use the shared @workspace/ui package. Follow the installation guide to configure the registry, load styles, and choose import aliases.
Usage
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@workspace/ui/components/hover-card"<HoverCard>
<HoverCardTrigger>Hover</HoverCardTrigger>
<HoverCardContent>
The React Framework – created and maintained by @vercel.
</HoverCardContent>
</HoverCard>Composition
Use the following composition to build a HoverCard:
HoverCard
├── HoverCardTrigger
└── HoverCardContentTrigger Delays
Use delay and closeDelay on the trigger to control when the card opens and
closes.
<HoverCard>
<HoverCardTrigger delay={100} closeDelay={200}>
Hover
</HoverCardTrigger>
<HoverCardContent>Content</HoverCardContent>
</HoverCard>Positioning
Use the side and align props on HoverCardContent to control placement.
<HoverCard>
<HoverCardTrigger>Hover</HoverCardTrigger>
<HoverCardContent side="top" align="start">
Content
</HoverCardContent>
</HoverCard>Basic
Loading example…
Sides
Loading example…
RTL
To enable RTL support in shadcn/ui, see the RTL configuration guide.
Loading example…
API Reference
See the Base UI documentation for more information.