║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Preview Card description: A popup that appears when a link is hovered, showing a preview for sighted users. author: name: imskyleen url: https://github.com/imskyleen

<ComponentPreview name="demo-components-base-preview-card" />

Installation

<ComponentInstallation name="components-base-preview-card" />

Usage

<PreviewCard>
  <PreviewCardTrigger>Hover me</PreviewCardTrigger>
  <PreviewCardPanel>
    <p>Preview card content</p>
  </PreviewCardPanel>
</PreviewCard>

API Reference

PreviewCard

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/base/preview-card#previewcard" text="Animate UI API Reference - PreviewCard" />

<ExternalLink href="https://base-ui.com/react/components/preview-card#root" text="Base UI API Reference - PreviewCard.Root" />

</div>

PreviewCardTrigger

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/base/preview-card#previewcardtrigger" text="Animate UI API Reference - PreviewCardTrigger" />

<ExternalLink href="https://base-ui.com/react/components/preview-card#trigger" text="Base UI API Reference - PreviewCard.Trigger" />

</div>

PreviewCardPanel

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/base/preview-card#previewcardpositioner" text="Animate UI API Reference - PreviewCardPositioner" />

<ExternalLink href="https://base-ui.com/react/components/preview-card#positioner" text="Base UI API Reference - PreviewCard.Positioner" />

</div>

PreviewCardBackdrop

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/base/preview-card#previewcardbackdrop" text="Animate UI API Reference - PreviewCardBackdrop" />

<ExternalLink href="https://base-ui.com/react/components/preview-card#backdrop" text="Base UI API Reference - PreviewCard.Backdrop" />

</div>

Credits

• Base UI Preview Card
• Credit to shadcn/ui for style inspiration.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║