Preview Link Card · React Aria

悬停时显示目标页面截图的链接卡片，基于 PreviewTrigger 与 Popover。

安装

React Aria 的原语保持上游 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 属性都保持 React Aria 的写法。也可以按子路径单独引入：

tsx

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

preview-link-card.tsx

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

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

动效

卡片从链接的锚点以 0.8 缩放淡入，弹簧 stiffness 400 / damping 29。
关闭时缩回 0.8 并淡出；卡片本身也是链接，可直接进入目标页。

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

API

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

属性	类型	默认值
href	`string`	`—`
src	`string`	`—`
width	`number`	`240`
height	`number`	`135`
deviceScaleFactor	`number`	`1`
colorScheme	`'light' \| 'dark'`	`'light'`
placement	`Placement`	`'top'`
offset	`number`	`10`
href	`string`	`—`
target, rel, download, hrefLang, ping, referrerPolicy	`LinkProps`	`—`
alt	`string`	`'preview image'`
…props	`Omit<React.ComponentProps<'img'>, 'src' \| 'width' \| 'height'>`	`—`

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

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