用途:为 Next.js 应用提供 100+ 动画和交互式 React 组件,常用于首页 hero 区、视差滚动、3D 卡片、文字动画、按钮、导航、表单、弹窗、轮播、网格布局、时间线、光标特效和加载动画等页面元素。组件不是 npm 包,而是通过 shadcn CLI 复制到代码库中,可自由修改。
主要能力:涵盖背景与效果、卡片、滚动与视差、文字、按钮、导航、输入表单、弹层、轮播、布局网格、数据可视化、光标指针、3D、加载器、区块模板等类别。支持 TypeScript、Tailwind CSS v3+、Framer Motion、深色模式,并默认响应式。
使用方式:需要 Next.js 13+(推荐 App Router)、React 16.8+、Tailwind CSS v3+、推荐 TypeScript,Node.js 18+ 与 bun/npm/pnpm。新建项目可用 bunx create-next-app@latest my-app,再执行 bunx --bun shadcn@latest init 初始化 shadcn。随后在 components.json 的 registries 中加入 "@aceternity": "https://ui.aceternity.com/registry/{name}.json",再用 bunx shadcn@latest add @aceternity/background-beams 安装组件。也可手动安装 motion、clsx、tailwind-merge 并在 lib/utils.ts 中加入 cn 函数,再复制组件代码。
限制:组件依赖客户端渲染,使用时需添加 "use client";未安装 motion 会报模块错误;cn 未定义需补齐工具函数;Tailwind 配置或 globals.css 缺少指令会导致样式失效;深色模式需在 tailwind.config.ts 中设置 darkMode: "class"。官方文档、组件库、Shadcn UI、Framer Motion 与 Tailwind CSS 的链接均保留,具体收费、授权与更新细节暂未提供。