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>
    <PreviewLinkCardContent>
      <PreviewLinkCardImage alt="Preview link card content" />
    </PreviewLinkCardContent>
  </PreviewLinkCardPortal>
</PreviewLinkCard>

API Reference

PreviewLinkCard

Animate UI API Reference - HoverCard Primitive

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 - HoverCardTrigger Primitive Radix UI API Reference - HoverCard.Trigger

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

PreviewLinkCardPortal

Animate UI API Reference - HoverCardPortal Primitive Radix UI API Reference - HoverCard.Portal

PreviewLinkCardContent

Animate UI API Reference - HoverCardContent Primitive Radix UI API Reference - HoverCard.Content

Prop	Type	Default
`transition?`	`Transition`	`{ type: 'spring', stiffness: 300, damping: 25 }`
`...props?`	`HTMLMotionProps<"div">`	-

PreviewLinkCardImage

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

Credits

Radix UI Hover Card
Inspired by Aceternity UI Link Preview

Preview Link Card

On this page