Preview Card

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

Made by imskyleen
Edit on GitHub
Open in
Animate UI

Installation

Usage

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

API Reference

PreviewCard

Base UI API Reference - PreviewCard.Root
PropTypeDefault
followCursor?
boolean | "x" | "y"
false
followCursorSpringOptions?
SpringOptions
{ stiffness: 200, damping: 17 }

PreviewCardTrigger

Base UI API Reference - PreviewCard.Trigger

PreviewCardPortal

Base UI API Reference - PreviewCard.Portal

The keepMounted property is not supported in the PreviewCardPortal component, as it is used for animation.

PreviewCardPositioner

Base UI API Reference - Popover.Positioner

PreviewCardPopup

Base UI API Reference - PreviewCard.Popup
PropTypeDefault
transition?
Transition
{ type: 'spring', stiffness: 300, damping: 25 }
...props?
HTMLMotionProps<"div">
-

The render property is not supported in the PreviewCardPopup component, as it is used for animation.

PreviewCardBackdrop

Base UI API Reference - PreviewCard.Backdrop

PreviewCardArrow

Base UI API Reference - PreviewCard.Arrow

Credits

Built by Skyleen. The source code is available on GitHub.

Last updated: 11/18/2025