A rich preview on hover or keyboard focus of a link: a person, a project, a record.
HoverCard opens after a short delay (openDelay, 500ms) when the pointer rests on its trigger or the trigger takes keyboard focus, and closes a little after the pointer leaves (closeDelay, 200ms), so the pointer can travel onto the card. Touch never opens it: the trigger must work on its own.
The card is supplementary. It is tied to the trigger with aria-describedby while open and Esc dismisses it.
inline renders the open panel in the page flow: no portal, scrim, focus trap, scroll lock or outside-click listener. It exists for docs, previews and static mock-ups; never ship it as the live overlay.
Installation
npx shadcn@latest add KezLahd/rime/hover-cardAlso installs: base, popover.
Usage
import { HoverCard } from "@/components/ui";
<HoverCard trigger={<a href="/team/jane-cooper">@janecooper</a>}>
…profile…
</HoverCard>Examples
Open
On hover and focus
Assigned to @janecooper for review. Hover or focus the name.
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
HoverCard
| Prop | Type | Default | Description |
|---|---|---|---|
| triggerRequired | ReactElement<TriggerProps> | A link or button the card previews: a person's name, a project, a reference. | |
| childrenRequired | ReactNode | The preview: a few lines of supporting detail. Never the only route to an action. | |
| openDelay | number | 500 | ms of hover or focus before it opens. |
| closeDelay | number | 200 | ms after the pointer leaves before it closes, so it can travel onto the card. |
| side | FloatSide | "bottom" | |
| align | FloatAlign | "start" | |
| width | number | 300 | Panel width in px. |
| inline | boolean | Render the card open in the page flow under the trigger (docs, previews). | |
| className | string |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --hover-card-pad | calc(16px * var(--density)) | … |
| --hover-card-radius | var(--r-lg) | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --border-w | tokens.css | … |
| --density | tokens.css | … |
| --dur | tokens.css | … |
| --dur-slow | tokens.css | … |
| --ease-out | tokens.css | … |
| --ink-body | tokens.css | … |
| --popover-blur | tokens.css | … |
| --popover-border | tokens.css | … |
| --popover-shadow | tokens.css | … |
| --popover-surface | tokens.css | … |
| --r-lg | tokens.css | … |
| --text-small | tokens.css | … |
| --z-popover | tokens.css | … |
Accessibility
- Opens on keyboard focus as well as hover, and the card describes its trigger (aria-describedby).
- Esc closes it. Nothing inside it should be the only way to reach an action.
- Respects reduced motion: it fades in place.
Do and don't
Do
- Use it on links whose target needs a glance before a click: people, projects, references.
Don't
- Don't put buttons or forms in a hover card; use Popover.
- Don't use it on touch-first screens as the only way to see the detail.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open hover-card.md