Preview Link Card

Open in

Read the Animate UI Docs — hover to preview, click to dive in.

followCursor

href

side

sideOffset

align

alignOffset

Installation

Usage

<PreviewLinkCard href="https://animate-ui.com/docs">
  <PreviewLinkCardTrigger>Animate UI Docs</PreviewLinkCardTrigger>
  <PreviewLinkCardPortal>
    <PreviewLinkCardPositioner>
      <PreviewLinkCardPopup>
        <PreviewLinkCardImage alt="Preview link card content" />
      </PreviewLinkCardPopup>
    </PreviewLinkCardPositioner>
  </PreviewLinkCardPortal>
</PreviewLinkCard>

API Reference

PreviewLinkCard

Animate UI API Reference - PreviewCard Primitive Base UI API Reference - PreviewCard.Root

Prop	Type	Default
`href`	`string`	-
`src?`	`string`	-
`width?`	`number`	-
`height?`	`number`	-
`deviceScaleFactor?`	`number`	`1`
`colorScheme?`	`0`	`light`
`followCursor?`	`boolean \| "x" \| "y"`	`false`
`followCursorSpringOptions?`	`SpringOptions`	`{ stiffness: 200, damping: 17 }`

PreviewLinkCardTrigger

Animate UI API Reference - PreviewCardTrigger Primitive Base UI API Reference - PreviewCard.Trigger

Prop	Type	Default
`...props?`	`React.ComponentProps<'a'>`	-

Prop	Type	Default
`transition?`	`Transition`	`{ type: 'spring', stiffness: 300, damping: 25 }`
`...props?`	`React.ComponentProps<'a'>`	-

PreviewLinkCardImage

Prop	Type	Default
`alt?`	`string`	`preview image`
`...props?`	`React.ComponentProps<'img'>`	-

PreviewLinkCardBackdrop

Animate UI API Reference - PreviewCardBackdrop Primitive Base UI API Reference - PreviewCard.Backdrop

PreviewLinkCardArrow

Animate UI API Reference - PreviewCardArrow Primitive Base UI API Reference - PreviewCard.Arrow

Credits

Base UI Preview Card
Inspired by Aceternity UI Link Preview

Preview Link Card

On this page