Browse components
Hover Card
Rich preview card that blooms out of a link on hover or focus, with open/close delays, an arrow, smart flipping and a top-layer render.
Installation
npx shadcn@latest add @glint-ui/hover-cardFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/hover-card.json
Usage
import { HoverCard } from "@/components/ui/hover-card";
<HoverCard>
<HoverCardTrigger href="/u/mira">@mira</HoverCardTrigger>
<HoverCardContent side="bottom">...</HoverCardContent>
</HoverCard>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| openDelay | number | 500 | HoverCard: ms of hover/focus before opening. |
| closeDelay | number | 250 | HoverCard: ms before closing after leaving. |
| side | "bottom" | "top" | "right" | "left" | "bottom" | Content: preferred side (flips when there is no room). |
| align | "center" | "start" | "end" | "center" | Content: alignment along the trigger. |
| sideOffset | number | 10 | Content: gap to the trigger in px. |
| arrow | boolean | true | Content: arrow pointing at the trigger. |
| open | ReactNode | — | HoverCard: controlled open state (with onOpenChange), or defaultOpen. |
| className | string | — | Extra classes for the root element. |