Hover Card
A preview panel shown on hover or keyboard focus.
Overview
A hover card previews linked content — a profile, a document — when the
pointer rests on (or keyboard focus reaches) its trigger. It is visually
identical to Popover; only the trigger semantics differ. Because touch has
no hover, never put essential content or actions here.
$ npx morpha-ui add hover-cardInstallation
Morpha UI components are distributed via the Morpha CLI: npx morpha-ui add hover-card. In the meantime, since this is the base shadcn component, you
can also add it directly:
npx shadcn@latest add hover-cardAPI Reference
Prop
Type
Accessibility
- Opens on keyboard focus as well as hover, so keyboard users get the preview too.
- The card is supplementary by design — screen readers and touch users must be able to complete every task without it.