HoverCard
A preview card for a person or link that opens on hover and on keyboard focus; supplementary only.
- Pro
- Version 2.0.0-rc.1
- APG pattern: Disclosure on focus and hover (non-modal)
Examples
Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.
Tokens
The 1 design tokens HoverCard reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 1 tokens
| Token | Value now | CSS variable |
|---|---|---|
| spacing.inset.md | … | --sd-spacing-inset-md |
Install
Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.
Add it from the registry (Pro licence key)
npx shadcn@latest add @superduperui/hover-cardThen import it
import { HoverCard } from "@/components/ui/hover-card"Props
| Prop | Type | What it does |
|---|---|---|
childrenrequired | ReactElement | The trigger: a Link or Button that already makes sense on its own (the card only adds a preview). |
contentrequired | ReactNode | The preview. Supplementary only: never the only copy of information, never the only way to an action. |
placement | PopoverPlacementDefault 'bottom' | Side the card opens on. Default bottom. |
openDelay | numberDefault 500 | Delay before opening on hover, in ms. Default 500. Focus opens it at once. |
closeDelay | numberDefault 300 | Delay before closing after the pointer leaves, in ms. Default 300 (time to move onto the card). |
className | string |
When to use it
Use it for
- Previews of people, links and records
Use something else for
- Actions or essential information: put them on the page
- Short text about a control: use Tooltip
Accessibility
Screen readers announce "Priya Shah, link, Design lead, joined January 2026".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6, 2.3.3.
Compact density meets AA (2.5.8, 24px targets), not AAA.
What your product still has to do
- Never put the only copy of information or the only path to an action in a hover card
Shared patterns it ships with: 1.4.13 (hoverable, persistent, Esc closes).
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 40 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 105 text runs: 0 below 7:1, lowest 8.42:1 |
| Target size | 2 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 18 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 2 of 2, Firefox 2 of 2, WebKit 2 of 2 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Keyboard
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Focusing the link opens the preview; focus stays on the link |
| Escape | Esc closes the preview and keeps focus on the link |
In Figma
The Figma component is HoverCard, with Placement (Bottom, Top, Start, End). The Figma library isn’t published yet.
Figma to code: Placement → placement (Bottom = "bottom", Top = "top", Start = "start", End = "end"); Content → content; Show trigger → (children: the trigger is drawn outside the card); Trigger → (children: the trigger Link text) when Show trigger.