Neumorphism UI

Hover Card

用于预览链接目标的补充信息，例如个人资料。

预览

个人资料预览

在个人资料链接旁预览姓名与职位信息。

正在加载预览。

安装

首次使用此 Registry？请先完成 基础配置与共享样式安装 。

npx shadcn@latest add @neumorphism-ui/hover-card

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

Registry JSON

用法

让 HoverCardTrigger 保持为有意义的链接，补充信息放在 HoverCardContent。即使不打开预览，也应能理解链接并完成导航。

"use client";

import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";

export default function Example() {
  return (
    <HoverCard>
      <HoverCardTrigger href="/team/alex">Alex Kim</HoverCardTrigger>
      <HoverCardContent>Product designer based in Seoul.</HoverCardContent>
    </HoverCard>
  );
}

API 参考

补充说明链接目标的预览卡片。 不要把必要信息或操作只放在悬停内容中。原始链接仍应含义明确。

组件属性类型默认值说明
HoverCardopen / defaultOpenboolean—设置受控状态或初始状态。
HoverCardTriggerdelay / closeDelaynumber—打开与关闭的延迟，单位为毫秒。
HoverCardContentsideOffsetnumber—设置考虑视口边界的面板位置或间距。

无障碍

  • 01

    不要把必要信息或操作只放在悬停内容中。原始链接仍应含义明确。

  • 02

    修改 render 或 className 时保留标签关联和可见焦点。