Ground

为React/Next.js应用提供手绘级Framer Motion动画组件，全部免费开源，支持直接复制粘贴使用，无需安装额外依赖。

它能做什么

Ground 提供超过30种手工制作的动画组件，涵盖按钮、卡片、输入框、菜单、导航栏、轮播图、画廊、布局切换等类别。所有组件基于TailwindCSS + React/Next.js + Framer Motion + TypeScript构建，用户只需复制代码即可集成，底层样式（颜色、字体等）留给开发者自定义。

• 按钮类: Checkout、Create、Delete、Github Button、Second brain、Sparkles
• 卡片类: Birthday、Booking、Calendar、Call、Counter、Experience、Frequency、Hello world、Linear、Morphing pill、Notch、Notch-two、Overview、Stacked、Piano、Strike
• 轮播与画廊: Carousel One、Perspective、Swipe Card、Carousel Galleries Hover、One、Radial、Two
• 输入框类: Google iMessage、Password strength、Validity、Verifier
• 布局与菜单: Grid to Flex、Scroll Count、Circular Hamburger、Mode toggle、Liquid Reveal、Vercel Navbar
• 其他: Marquee、Without Framer Motion（标注“maybe still under construction”）

和同类组件的差异

Ground 明确不提供完整UI库（如Material-UI或Chakra-UI），而是聚焦于可复用的动画效果和交互片段。它遵循“headless”风格（类似shadcn/ui），开发者只取所需代码，无冗余组件。项目由Bossadi Zenith个人维护，主要目的是学习Framer Motion并分享成果。

• 非全栈UI库: 仅提供动画与交互，不包含表单系统、数据表格等复杂组件
• 可搭配其他UI库: 需自行配置TailwindCSS，可与MUI、Chakra等共存
• 轻量集成: 无需安装npm包，直接复制粘贴代码片段到项目中

怎么上手

访问官网首页或组件文档页，按cmd+K（或Ctrl+K）打开搜索框，可快速查找组件。每个组件页面提供完整源代码和预览，复制后粘贴到项目中即可。项目要求项目本身已配置TailwindCSS、React/Next.js、Framer Motion和TypeScript。GitHub仓库提供完整源码和贡献指南。

• 搜索快捷键: 页面内按cmd+K调出全局搜索，支持模糊匹配
• 本地运行: 克隆仓库后按README步骤启动开发服务器
• 添加组件: 将组件文件复制到项目的components目录下，按需调整样式变量
• 贡献方式: 通过GitHub提交PR，需遵循项目出色实践指南

社区反馈与质量

项目在X（Twitter）上获得多位开发者好评。Chandra Panta Chhetri称赞其“headless风格类似shadcn/ui”；Rakesh Kumawat表示“一定会用”；Davis评价“So good!”；Peter Cruckshaw建议增加语法高亮功能。Anmol Baranwal特别提到“Gallery ones和Password strength很酷”。

• 用户评价: Password strength组件被多位开发者点名表扬
• 改进建议: 社区提议增加代码语法高亮显示
• 活跃度: 官网底部提供GitHub、Twitter、Discord、LinkedIn链接

收费与限制

Ground 完全免费且开源，无任何付费层级或隐藏功能。项目无中文文档或界面，所有内容均为英文。无官方移动端App，仅提供Web组件库。不支持Vue、Angular等其他框架，仅面向React/Next.js生态。

• 开源协议: 未在材料中明确，但官网标注“Free & Open Source”
• 中文支持: 无中文文档或翻译
• 框架限制: 仅支持React/Next.js，不含Vue或Angular版本
• 无后端服务: 纯前端组件，不提供API或数据库功能

常见问题

Q1：Ground 的组件需要安装npm包吗？

A1：不需要。Ground 采用“复制粘贴”模式，每个组件页面提供完整源代码，直接复制到项目中即可使用，无需安装任何npm包。但项目本身需要已配置TailwindCSS、React/Next.js、Framer Motion和TypeScript。

Q2：Ground 和 shadcn/ui 有什么区别？

A2：两者都采用headless风格和复制粘贴模式，但Ground专注于动画效果和交互组件（如Password strength、Sparkles按钮），而shadcn/ui提供更完整的UI基础组件（如对话框、表格）。Ground 的组件更强调Framer Motion动画，且项目由个人维护，规模较小。

Q3：Ground 的组件可以在Vue项目中使用吗？

A3：不能。Ground 的所有组件均基于React/Next.js和Framer Motion构建，不提供Vue、Angular或其他框架版本。官网文档明确要求使用React/Next.js + TailwindCSS + Framer Motion + TypeScript。

更多同类工具与网站,可在落地页组件分类继续挑选。

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