用途:Aceternity UI 是面向 Next.js 应用的动画 React 组件库技能,提供 100+ 生产级组件,适合制作英雄区、视差滚动、3D 卡片、文字动画等具有视觉冲击力的页面。
主要能力:组件覆盖背景与特效、卡片、滚动与视差、文字、按钮、导航、输入与表单、弹层与气泡、轮播、布局网格、数据可视化、光标效果、3D 组件、加载器、区块模板等类别;支持暗色模式、响应式与 TypeScript,使用 Tailwind CSS 与 Framer Motion。组件以源码形式复制到项目中,便于定制,而非 npm 包依赖。
使用方式:需 Next.js 13+(推荐 App Router)、React 16.8+、Tailwind CSS(v4 为 CSS-first,v3 亦可)、Node.js 20+ 与 bun/npm/pnpm。先创建 Next.js 项目,再用 shadcn CLI 初始化:bunx --bun shadcn@latest init(或 npx shadcn@latest init / pnpm dlx shadcn@latest init)。之后在 components.json 中添加 Aceternity registry:"@aceternity": "https://ui.aceternity.com/registry/{name}.json"。安装组件示例:bunx shadcn@latest add @aceternity/background-beams,也可手动安装 motion、clsx、tailwind-merge 并复制组件代码。使用时通常需在文件顶部加 "use client"。
适用场景:英雄区与落地页、产品与功能展示、作品集或机构网站、营销页 CTA、带滚动交互的故事型页面、交互式时间线等。
限制与注意事项:组件依赖客户端渲染,重组件可用 dynamic 懒加载以优化性能;生产使用前应关注供应链安全,如禁用安装脚本、设置冷却期并审计依赖。常见问题包括缺少 motion 依赖、缺少 cn 工具函数、未加 "use client"、Tailwind 或暗色模式配置不当。资料未提供具体收费或价格信息,暂未提供。