Skip to content
Core ElementsFree

Hover Card

A rich preview popup shown on hovering a trigger.

Usage

Installation

bash
npm install @wunderui/react

Then import what you need:

tsx
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@wunderui/react"

Examples

Hover card

A preview card that appears when you hover a link or an avatar.

In context

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Mentions in a comment

Hover a mention to preview the person.

JWJonas Weber2 h ago

Can review the empty states before Thursday?