Preview Card

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

API Reference

Preview

Installation

Usage

import {
  PreviewCard,
  PreviewCardContent,
  PreviewCardTrigger,
} from "@/components/ui/preview-card"
<PreviewCard>
  <PreviewCardTrigger>Hover me</PreviewCardTrigger>
  <PreviewCardContent>Preview Card Content</PreviewCardContent>
</PreviewCard>

API Reference

PreviewCard

Root component. Alias for PreviewCard.Root from Base UI.

PreviewCardTrigger

Trigger element that shows the preview card on hover. Alias for PreviewCard.Trigger from Base UI.

PreviewCardContent

Popup container that displays the preview content. Wraps PreviewCard.Portal, PreviewCard.Positioner, and PreviewCard.Popup.

Examples

Light Variant