Preview Link Card · Radix UI

悬停时显示目标页面截图的链接卡片，基于 Radix UI 的 Hover Card。

安装

Radix UI 的原语保持上游 API 不变，安装只需要三步：加包、加组件、把 import 换掉。

终端

bun add @animate-ui/react motion
bunx shadcn@latest add preview-link-card
bunx @animate-ui/cli@latest animate preview-link-card

用法

从 Animate UI 引入原语，其余结构、属性与 data 属性都保持 Radix UI 的写法。也可以按子路径单独引入：

tsx

import {
  PreviewLinkCard,
  PreviewLinkCardContent,
  PreviewLinkCardImage,
  PreviewLinkCardPortal,
  PreviewLinkCardTrigger,
} from '@animate-ui/react/primitives/radix-ui/preview-link-card';

preview-link-card.tsx

import {
  PreviewLinkCard,
  PreviewLinkCardContent,
  PreviewLinkCardImage,
  PreviewLinkCardPortal,
  PreviewLinkCardTrigger,
} from '@animate-ui/react/primitives/radix-ui/preview-link-card';

export function DocsLink() {
  return (
    <PreviewLinkCard href="https://animate-ui.com/docs">
      <PreviewLinkCardTrigger>Animate UI Docs</PreviewLinkCardTrigger>
      <PreviewLinkCardPortal>
        <PreviewLinkCardContent>
          <PreviewLinkCardImage alt="Animate UI Docs" />
        </PreviewLinkCardContent>
      </PreviewLinkCardPortal>
    </PreviewLinkCard>
  );
}

动效

卡片从触发元素方向以 0.8 缩放淡入，弹簧 stiffness 400 / damping 29。
默认 openDelay 700ms 打开，closeDelay 300ms 后缩回 0.8 并淡出。

所有时长都会乘以 AnimateUIProvider 的 tempo，并遵守系统的减少动效设置。

API

动效相关的 transition 与 exitTransition 是 Animate UI 唯一新增的属性；其余 props 与 Radix UI 完全一致。

属性	类型	默认值
href	`string`	`—`
src	`string`	`—`
width	`number`	`240`
height	`number`	`135`
deviceScaleFactor	`number`	`1`
colorScheme	`'light' \| 'dark'`	`'light'`
side	`'top' \| 'right' \| 'bottom' \| 'left'`	`'top'`
sideOffset	`number`	`10`
align	`'start' \| 'center' \| 'end'`	`'center'`
href	`string`	`—`
target, rel, download, hrefLang, ping, referrerPolicy	`React.ComponentProps<'a'>`	`—`
alt	`string`	`'preview image'`
…props	`Omit<React.ComponentProps<'img'>, 'src' \| 'width' \| 'height'>`	`—`

未列出的属性与上游 API 完全一致，可在官方文档查阅。

内容对应官方文档 2026-10-18 版本。