Preview Card

A popup that appears when a link is hovered, showing a preview for sighted users.

Overview

Use Preview Card to show a small preview when a user hovers or focuses a link.

Preview cards are useful for profiles, documents, issues, pages, and references where a quick summary helps users decide whether to open the link.

Anatomy

A preview card has a trigger link and popup content. The popup usually includes a title, short description, metadata, and sometimes media.

Usage guidance

Keep preview content brief. It should help users understand the destination, not replace the destination page.

Accessibility

The link must still work without the preview. Do not put essential actions only inside hover-only content.

Installation

npm

npx love-ui@latest add preview-card

Usage

import { Button } from "@/components/ui/button"
import {
  PreviewCard,
  PreviewCardPopup,
  PreviewCardTrigger,
} from "@/components/ui/preview-card"

<PreviewCard>
  <PreviewCardTrigger>Open Preview Card</PreviewCardTrigger>
  <PreviewCardPopup>Preview Card Content</PreviewCardPopup>
</PreviewCard>