Aceternity UI
面向 React、Next.js、Tailwind CSS 与 Motion 的动画组件和页面素材集合，通过 shadcn Registry 复制源码。
项目概述
Aceternity UI 提供背景、卡片、文字、3D、滚动、导航和数据展示组件，并另有 Pro Blocks 与完整模板，主要用于现代营销网站。
Aceternity UI 是由 Aceternity 团队推出的 React 视觉组件与页面素材平台，技术栈以 Next.js、TypeScript、Tailwind CSS 和 Motion 为主。当前推荐使用 shadcn CLI 从 `@aceternity` Registry 查看并复制组件源码，而不是依赖旧的 `aceternity-ui` npm CLI。免费目录包含背景、文字、卡片、3D、滚动视差、导航、表单和数据展示等组件；Pro 产品则提供付费 Blocks、Templates 和额外组件。它没有像 Magic UI 那样公开一个统一、可核验 MIT License 的组件源码仓库，因此本页不会把全部 Aceternity UI 内容笼统标为 MIT：免费内容的可用范围与 Pro 的 Aceternity License 应分别按照具体页面和购买条款核对。
主要特点
Aceternity UI 以高视觉表现和交互动效为重点，覆盖从独立组件到完整营销页面的多层素材。
Registry 源码交付
通过 shadcn CLI 把组件代码和依赖复制进项目，开发者可以直接修改 TSX、Tailwind Classes、动画参数和数据结构。
背景与光效
提供 Aurora、Background Beams、Meteors、Spotlight、Vortex、Wavy Background、Grid 与 Dot 等 Hero 背景效果。
动画文字
Text Generate、Flip Words、Typewriter、Colourful Text、Text Reveal 和 Container Text Flip 可强化标题与叙事节奏。
卡片与 Hover 交互
3D Card、Evervault Card、Wobble Card、Focus Cards、Card Spotlight、Glare Card 等覆盖多种空间和指针反馈。
滚动与视差
Hero Parallax、Macbook Scroll、Sticky Scroll Reveal、Tracing Beam 和 Container Scroll Animation 适合滚动驱动的产品演示。
3D、Canvas 与可视化
Globe、3D Pin、3D Marquee、Canvas Reveal、World Map、Timeline 和 Compare 能承载全球业务、数据与技术展示。
导航和应用组件
Floating Navbar、Sidebar、Tabs、Animated Modal、File Upload、Signup Form 等组件可补充营销页中的实际交互。
Tailwind CSS v3 / v4
官方目录面向 Tailwind CSS v4，同时说明可兼容 v3；样式以 Utilities、CSS Variables、Gradient 和 Keyframes 为主。
Motion 动画基础
大量组件使用 Motion for React 实现 Spring、Layout、Hover、Scroll 和 Presence 动画，源码复制后可以调整节奏与触发条件。
搜索、查看与列出
shadcn CLI 可以在安装前 List Registry、按关键词 Search，并 View 文件与依赖，降低盲目复制代码的风险。
AI 与 MCP 发现
Registry 可接入 shadcn MCP，官方还提供机器可读组件目录，让 AI 助手能搜索并安装指定组件。
Free、Labs 与 Pro
免费 Components 之外还有可交互调参的 Labs，以及独立许可的 Pro Components、Blocks 与 Templates。
适用场景
当 React 产品需要快速构建有动画、3D、滚动叙事或品牌质感的用户可见页面时，它提供了丰富起点。
SaaS 营销网站
Hero、Bento、Feature、Pricing、Testimonials 和 CTA 素材可快速组合产品首页与活动页面。
AI 与开发者工具
Terminal、Code Block、Globe、Background Grid 和动态文字适合展示技术能力、API、Agent 和全球基础设施。
作品集与创意机构
3D Card、Parallax、Image Slider、Lens 和动画导航能帮助设计师、工作室和创作者建立更具表现力的展示。
产品发布专题
滚动叙事、设备展示、Comparison 和 Motion Effect 适合新品发布、功能升级与品牌 Campaign。
Next.js 快速原型
App Router 项目可直接复制 Client Components，快速验证复杂视觉效果和 Landing Page 转化路径。
现有 shadcn/ui 项目增强
让 shadcn/ui 继续负责基础 Form、Dialog 和 Menu，再按需加入 Aceternity 的视觉与营销组件。
购买完整模板后的交付
对时间紧张的商业项目，Pro Blocks 与 Templates 可提供更完整页面，但需遵守席位、再分发和模板销售限制。
优点与注意事项
技术选型不仅要看能力，也要理解它带来的团队成本。
主要优点
Aceternity UI 擅长的地方
- 免费目录覆盖大量背景、文字、卡片、3D 与滚动效果
- 通过 shadcn Registry 按组件复制，不必引入整套 UI Runtime
- 源码进入项目后可直接适配品牌、内容和交互要求
- 与 React、Next.js、Tailwind CSS 和 Motion 技术栈衔接自然
- CLI 支持搜索、预览和查看依赖，组件发现体验完整
- 既有独立组件，也有 Blocks、Templates 和 Labs 等不同层级素材
- 官方 Changelog 持续记录新增组件和改进
- 可通过 shadcn MCP 与机器可读目录辅助 AI 编程工具使用
需要注意
采用前应考虑的问题
免费 Components 与 Pro Items 的授权范围不同，官方 Pro License 禁止重新分发源文件和销售衍生模板；采用前必须核对具体 Item 条款。
Aceternity 的 GitHub 组织不是完整组件目录的 Canonical Repository，无法像普通开源库一样依赖 Tags、Releases 和 License 文件审计全部内容。
`aceternity-ui` npm 包停留在 0.2.2，当前官方文档推荐 `npx shadcn@latest add @aceternity/...`，不要沿用过时教程。
Registry 更新不会自动同步到已经复制的组件。应记录来源、安装日期和必要修改，并手工比较后续修复。
Particle、Canvas、WebGL、Blur、3D Transform 和持续 Motion 可能增加 Bundle、GPU、内存与电量消耗，需在低端移动设备测试。
自动滚动、视差、闪烁和强烈缩放可能让用户不适，应支持 `prefers-reduced-motion`、暂停控制和静态替代内容。
视觉预览不能证明键盘、焦点、语义、对比度和屏幕阅读器体验正确，尤其要检查 Modal、Navbar、Carousel 与 Form。
依赖 Mouse、Window、Canvas 或 Motion Hook 的组件通常需要 `use client`，并要避免 Hydration 差异与服务端访问浏览器 API。
部分组件会加入 Motion、tsparticles、Three.js、图标或语法高亮包，安装前应查看 Registry 内容、Bundle 和许可证。
大量光效、3D 和滚动动画同时出现会降低信息层级与转化，应选择少数服务于品牌叙事的效果。
付费 Blocks 和 Templates 可用于 End Product，但官方许可限制将源文件或衍生模板重新销售、分发到 Marketplace。
安装和更新依赖官方 Registry；生产团队应保留已审核源码，不要让 Build 过程临时从 Registry 拉取未固定内容。
快速开始
下面使用当前推荐的 shadcn Registry 工作流，配置命名空间、搜索和预览组件，再添加 Hover Effect、Sparkles、MCP 与无障碍降级。
bashnpx shadcn@latest init
# 确认 Tailwind、CSS Variables 与路径 Aliasjson{
"registries": {
"@aceternity": "https://ui.aceternity.com/registry/{name}.json"
}
}bashnpx shadcn@latest list @aceternity
npx shadcn@latest search @aceternity -q "card"
npx shadcn@latest view @aceternity/card-hover-effectbashnpx shadcn@latest add @aceternity/card-hover-effect
npx shadcn@latest add @aceternity/sparkles
npx shadcn@latest add @aceternity/world-maptsximport { HoverEffect } from "@/components/ui/card-hover-effect";
const features = [
{
title: "共享组件",
description: "统一品牌与交互规范。",
link: <a href="/docs/components">查看文档</a>,
},
{
title: "快速发布",
description: "从可编辑源码开始迭代。",
link: <a href="/docs/getting-started">开始使用</a>,
},
];
export function FeatureGrid() {
return <HoverEffect items={features} />;
}tsximport { SparklesCore } from "@/components/ui/sparkles";
export function Hero() {
return (
<section className="relative overflow-hidden py-28 text-center">
<SparklesCore
className="absolute inset-0"
background="transparent"
minSize={0.5}
maxSize={1.2}
particleDensity={50}
/>
<div className="relative z-10">
<h1 className="text-5xl font-bold">让产品更有表现力</h1>
<p className="mt-4 text-muted-foreground">
保证核心内容在动画失败时仍然可读。
</p>
</div>
</section>
);
}css@media (prefers-reduced-motion: reduce) {
.aceternity-section *,
.aceternity-section *::before,
.aceternity-section *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}bashnpx shadcn@latest mcp init
# 之后可让支持 MCP 的工具搜索 @aceternity Registrybashnpm run lint
npm run typecheck
npm run build
# 再使用真实移动设备检查性能、触摸和减少动态效果下一步：先通过 `shadcn view` 查看将写入的文件和依赖，只选择真正需要的效果。复制后应像维护自有组件一样检查许可、性能、响应式、可访问性和升级方式。
类似项目
Magic UI、shadcn/ui、Motion 与 Tailwind CSS 是最直接的配套或替代方案；Motion Primitives、React Bits 和 Inspira UI 覆盖不同框架与动画抽象。
Magic UI
面向 React 与 Tailwind CSS 的开源动画组件集合，通过 shadcn Registry 将可编辑源码复制到项目中。
查看项目shadcn/ui
把可访问、可组合的组件源码直接加入项目，由团队完整拥有和定制的 UI 分发平台。
查看项目Motion
面向 React 和 JavaScript 的生产级动画库，统一处理弹簧、手势、布局、滚动和退出动画。
查看项目Tailwind CSS
以实用类为核心的 CSS 框架，快速构建定制化界面。
查看项目React Bits
面向 React 的动画、背景、文字效果与交互组件集合，提供 JavaScript、TypeScript、CSS 和 Tailwind 源码变体。
查看项目TweakCN
面向 shadcn/ui 与 Tailwind CSS 的可视化主题编辑器，可实时调整设计令牌并导出 CSS 或 Registry 命令。
查看项目Motion Primitives
面向 React 的可组合动画组件和原语，强调更细粒度的 Motion 控制与源码定制。
访问官网Inspira UI
将 Aceternity UI 与 Magic UI 风格带到 Vue 和 Nuxt 生态的 MIT 开源组件集合。
访问官网Aceternity UI vs Magic UI
Aceternity UI 与 Magic UI 都提供 React、Tailwind CSS 和 Motion 风格的可复制动画组件，也都支持 shadcn Registry。Aceternity UI 的免费目录、Pro Blocks、Templates 和 Labs 范围更广；Magic UI 则拥有公开的 MIT 组件源码仓库，开源边界更容易审计。
| 比较维度 | Aceternity UI | Magic UI |
|---|---|---|
| 核心定位 | 动画组件、3D、滚动效果、Blocks 与 Templates | 动画营销组件、背景、效果和展示素材 |
| 交付方式 | shadcn Registry 复制源码 | shadcn Registry 复制源码 |
| 公开源码 | 免费组件可查看代码，但无统一公开组件仓库 | 公开 magicuidesign/magicui MIT 仓库 |
| 许可 | Free 与 Pro 范围分开，Pro 使用 Aceternity License | 开源仓库 MIT；Pro 另有独立商业内容 |
| 视觉侧重 | 3D、Parallax、Canvas、复杂卡片和完整页面区块 | 文字、Pattern、Marquee、Globe、Bento 和轻量营销组件 |
| 组件发现 | Explore、Categories、Labs、Registry Search 与 AI Catalog | 组件文档、Registry 和官方 MCP |
| 商业内容 | 大量 Pro Blocks 与完整 Templates | 免费组件之外提供 Magic UI Pro |
| 更新追踪 | 官方 Changelog 与在线 Registry | Git History、Registry 与公开 Pull Request |
| 治理与审计 | 需逐 Item 记录来源、许可和复制时间 | 开源仓库更易统一查看 License、Commit 和依赖 |
| 更适合 | 需要丰富视觉实验、Blocks 或付费模板的团队 | 偏好公开源码仓库和较清晰开源边界的团队 |
如果你需要大量 3D、滚动叙事、复杂卡片或可购买的完整页面素材，Aceternity UI 的目录更丰富；如果更重视所有免费组件集中在公开 Git 仓库、便于审计和参与维护，Magic UI 的开源结构更清晰。两者都适合按需使用，不应在同一页面堆叠过多高成本动效。
资料核验
版本、维护信息与本页采用的官方资料来源。
本页依据 Aceternity UI 官方组件目录、CLI、AI Component Catalog、Changelog、Pricing、Terms 与 Pro License 页面整理。Aceternity UI 没有公开统一组件源码仓库，因此 GitHub 按钮链接其官方组织，维护状态主要依据官方网站 Changelog。
Aceternity UI 没有公开统一组件源码仓库；维护状态依据官方网站 Changelog。核验时最近可见更新为 2026 年 6 月 25 日，表示在线组件目录仍在更新，不代表每个免费或 Pro Item 都采用相同发布周期。