||

Preview Card

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

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

doc
preview-card-demo

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

 
npx honestui@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>