GreatUI：复制即用的 React 动效组件库

用 Tailwind 搭界面的人多半遇到过这种时刻：布局和配色都齐了，整页看起来还是「像个后台」。GreatUI（Great UI）是开发者 Saurabh Sharma 维护的 React 组件库，50 个组件全部走 shadcn 的复制粘贴模式：一条 npx shadcn 命令把 .tsx 源码写进你的项目，代码归你，不加运行时依赖。它和 shadcn/ui 最不一样的地方是押注动效——50 个组件里有 15 个是页面转场和主题切换动画，这类效果在主流组件库里没有成体系的存在。仓库 2026 年 7 月创建，截至 2026-10-12 有 268 星。

核心功能

• 复制即用，代码归你：每个组件都是一条 shadcn registry 记录（/r/<组件名>.json），npx shadcn@latest add 把 .tsx 源文件写进 components/ui/，改类名、删逻辑都不碰 node_modules。
• 转场动画成体系：动效是整个目录里最大的一块——15 种页面转场和主题切换动画，暗色模式的切换本身也有专属动画。这是它和 shadcn/ui 拉开差距的地方。

• 目录与安装：官网目录按 8 个分类列出 56 个组件，其中 50 个有 shadcn 安装命令；4 个 WebGL 着色器和 2 个演示组件（Animated Select、ASCII Image）只在站上可看。

分类	数量	代表组件
Visuals	13	MacBook 样机、浮动菜单、终端加载器
Page Transitions	11	帘式、像素、百叶窗、级联
Typography	8	文字揭示、词聚焦滚动
Layout & Cards	8	手风琴、团队区块
Social Cards	5	Twitter、Instagram 仿制卡
Shaders	4	液态涟漪、赛博故障
Theme Transitions	4	圆形扩散、模糊渐隐
Buttons	3	极简按钮

官网 lib/registry.ts 的目录数据（2026-10-12 查看）；可安装的 50 个即 shadcn registry 暴露的条目。

• 类型和可访问性：组件全 TypeScript，官网组件页为每个组件列出了 props 类型与默认值；README 称遵循 WAI-ARIA，深浅色各配高对比变体。
• 栈很新：Tailwind CSS v4、React 19，动效基于 motion（Framer Motion 改名后的包），shadcn 命令会按 registry 里的依赖清单自动安装。

典型使用场景

• 独立开发者给产品落地页或 side project 加「高级感」：从社交卡片、设备样机到整套页面转场，挑着抄进来，省掉自己调缓动曲线的晚上。
• 现有 Next.js 项目只想要一两处动效：比如只把暗色模式切换换成圆形扩散动画，代价远小于换整个组件库。
• 想读懂转场实现的人：每个组件就是一个源文件，看它怎么用 motion 的 AnimatePresence 编排转场，比翻文档直观。

快速上手

前提是一个已配好 Tailwind 的 React 或 Next.js 项目。以手风琴组件为例：

npx shadcn@latest add https://www.great-ui.com/r/accordion.json

命令把 Accordion.tsx 写进 components/ui/，registry 里声明的 motion 依赖自动进 package.json。在官网 components 页挑中哪个，把 URL 末尾的 accordion 换成对应 slug 就行；每个组件页都有可交互预览，先看后抄，官网的 changelog 页可以追新组件。

小结

GreatUI 适合有 Tailwind 底子、想给 React 界面加点动效但不想引入整套组件库的前端和全栈开发者；找表单、表格、弹窗这类生产级基础件，shadcn/ui 仍然更全。三件事要心里有数：一，仓库单人维护，2026 年 7 月创建，268 星（截至 2026-10-12），官网许诺的 Blocks（成块布局）还停在「Coming soon」；二，README 徽章写着 MIT，但仓库根目录 LICENSE 实际是一份自定义协议——个人和商业项目随便用（官方注明包括 SaaS 和终端应用），唯独禁止把它再打包成 UI 库或模板转售，商用前以 LICENSE 文本为准；三，转场动画容易过量，Anthropic 的 frontend-design 技能提醒过动效要有理由，挑一处用在关键路径上，比每个区块都塞一个更值。它和 Refero Styles 正好互补：那边给你真实网站的设计语言当参照，这边给你能直接落地的动效源码。