Aceternity UI

前端开发者与UI设计师在React/Next.js项目中快速集成200+免费可复制组件，基于Tailwind CSS和Framer Motion构建，支持shadcn兼容的微交互与动画效果。

组件分类与特色

官网按用途划分20余类组件，每类含多个具体实现，部分标注“New”表示近期新增。

• Hero Sections: 21+块，含Parallax Hero Images鼠标驱动视差效果
• Backgrounds: 11+块，含Aurora Background、Meteors、Shooting Stars、Vortex、Spotlight等动态背景
• Card Components: 含3D Card Effect、Evervault Card、Card Stack、Wobble Card、Expandable Card、Card Spotlight、Focus Cards、Infinite Moving Cards、Draggable Card、Comet Card、Glare Card、Direction Aware Hover
• Text Components: 含Canvas Text、Encrypted Text（乱码渐显）、Layout Text Flip、Colourful Text、Squiggly Text（SVG湍流滤镜）、Typewriter Effect、Flip Words、Text Hover Effect、Container Text Flip、Text Flipping Board（Vestaboard风格翻牌）
• Buttons: 含Magnetic Button（光标吸引弹簧回弹）、Hover Border Gradient、Moving Border、Stateful Button、Loaders（Multi Step Loader）
• Navigation: 含Notch（浮动可配置凹口）、Floating Navbar、Navbar Menu、Sidebar、Floating Dock（macOS风格）、Tabs、Resizable Navbar、Sticky Banner
• Inputs & Forms: 含Signup Form、Placeholders and Vanish Input、File Upload、Gooey Input（SVG果冻滤镜搜索框）
• Overlays: 含Dither Shader（实时有序抖动像素艺术效果）、Animated Modal、Animated Tooltip、Link Preview
• Carousels & Sliders: 含Images Slider Carousel、Apple Cards Carousel（苹果官网风格）、Animated Testimonials
• Data Visualization: 含GitHub Globe、World Map、Timeline、Compare（图片滑动对比）
• 其他: 含Code Block（基于react-syntax-highlighter）、Keyboard（mac风格机械键盘音效）、Terminal（bash语法高亮打字机效果）、ASCII Art（图片转ASCII可自定义字符集）、Webcam Pixel Grid（实时摄像头像素网格）、3D Globe（带工具提示和头像标记）、SVG Mask Effect、Tracing Beam、Lamp effect、Grid and Dot Backgrounds、Google Gemini Effect

模板与付费方案

官网提供20+完整模板，覆盖营销、SaaS、作品集等场景，部分标注“New”。All-Access付费可解锁全部模板和组件块（Component Blocks）。

• 免费: 200+组件可直接复制粘贴使用
• 付费All-Access: 一次性付款，获取100+预制模板和Shadcn兼容的组件块，含Hero Sections、Logo Clouds（6+块）、Feature Sections（18+块）、Bento Grids（6+块）、CTA Sections（6+块）、Testimonials、Team Sections、Empty States（5+块）、Pricing sections、Cards（4+块）、Navbars、Footers（4+块）、Login and Signup、Contact Sections（4+块）、Blog Sections（4+块）、Blog Content Sections（2+块）、FAQs（4+块）、Sidebars、Stats Sections、Backgrounds、Text Animations、Shaders（3+块）
• 模板示例: Productized Agency、Simplistic SaaS、Nodus Marketing、Agenforce Marketing、AI SaaS、Startup Landing Page、Proactiv Marketing、Minimal Portfolio、Minimalist Portfolio、Cryptgen Marketing、Playful Marketing、Agenlabs Agency、Devpro Portfolio、Foxtrot Marketing、Sidefolio Portfolio、Schedule Marketing

安装与使用

官网提供分步安装指南，支持Next.js和Tailwind CSS（v3和v4）。

• 安装Next.js: 使用Create Next App创建项目
• 安装Tailwind CSS: 提供Next.js下v3和v4的安装说明
• 添加工具类: 提供常用工具类（utilities）的添加方法
• CLI支持: 可通过命令行快速生成模板
• 所有组件基于Tailwind CSS + Framer Motion + TypeScript

用户反馈与社区

官网Pricing页面展示用户评价，强调社区认可度。

• 被Cal.com联合创始人Peer Richelsen称赞为“amazing”
• 开发者Rajesh David评价“免费且做得非常好”
• 开发者Micky称其为“见过的最漂亮的组件库”
• Greg Bergé（react-smooth-dnd作者）评价“Aceternity UI是shadcn/ui的魔法效果版”
• 作者@mannupaaji在Twitter持续更新
• 官网提供Changelog和搜索功能（⌘ K）

常见问题

Q1：Aceternity UI的组件是否需要付费？

A1：200+组件免费使用，可直接复制粘贴。付费All-Access（一次性付款）解锁100+预制模板和组件块（Component Blocks），包括Hero Sections、Logo Clouds、Feature Sections等完整集合。

Q2：Aceternity UI是否兼容shadcn/ui？

A2：是的，官网明确标注组件为“shadcn compatible”，用户评价中Greg Bergé将其称为“shadcn/ui for magic effects”。

Q3：Aceternity UI的3D Globe组件有什么特点？

A3：3D Globe是一个逼真的地球仪组件，支持工具提示（tooltips）和头像标记（avatar tips），可用于数据可视化场景。

更多同类工具与网站,可在界面交互分类继续挑选。

信息核实于 2026年7月,具体以官网为准。