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

---

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 releaseDate: 2025-09-07

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

Installation

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

Usage

<PreviewCard>
  <PreviewCardTrigger>Hover me</PreviewCardTrigger>
  <PreviewCardPortal>
    <PreviewCardPositioner>
      <PreviewCardPopup>
        <p>Preview card content</p>
      </PreviewCardPopup>
    </PreviewCardPositioner>
  </PreviewCardPortal>
</PreviewCard>

API Reference

PreviewCard

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

PreviewCardTrigger

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

PreviewCardPortal

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

<Callout type="info"> The `keepMounted` property is not supported in the `PreviewCardPortal` component, as it is used for animation. </Callout>

PreviewCardPositioner

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

PreviewCardPopup

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

<TypeTable type={{ transition: { description: 'The transition of the preview card popup.', type: 'Transition', required: false, default: "{ type: 'spring', stiffness: 300, damping: 25 }", }, '...props': { description: 'The props of the preview card content.', type: 'HTMLMotionProps<"div">', required: false, }, }} />

<Callout type="info"> The `render` property is not supported in the `PreviewCardPopup` component, as it is used for animation. </Callout>

PreviewCardBackdrop

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

PreviewCardArrow

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

Credits

• Base UI Preview Card

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