Hover Card
betaA preview card that grows out of its trigger on a springy overshoot while coming into focus from a blur, with an optional stagger for its contents.
- Overlays
- 1 file
- 2 npm packages
- Accessibility notes
The analytical engine notes were written by @ada in the margins of a translation.
pnpm dlx @dowel-ui/cli add hover-cardnpm packages installed: class-variance-authority, radix-ui.
import { HoverCard } from "@/components/ui/hover-card";Default
Sides
Repository
<HoverCard>
Every prop of Radix UI’s HoverCard.Root, plus className.
<HoverCardContent>
| Prop | Type | Default |
|---|---|---|
size | "sm" | "md" | "lg" | "md" |
staggerBrings the direct children in one after another, a few pixels below their place. | boolean | false |
Every prop of Radix UI’s HoverCard.Content, plus className.
<HoverCardArrow>
Every prop of Radix UI’s HoverCard.Arrow, plus className.
Radix HoverCard: opens when the trigger is hovered or receives keyboard focus, and closes on blur, pointer leave or Escape. The card is a visual preview for sighted users — it is not announced and is not in the tab order — so it must never hold the only copy of information or an action; the trigger (usually a link) has to make sense on its own. The open and close delays stop a card flashing up as the pointer passes. The grow, blur and stagger collapse under reduced motion, so the card simply appears.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes