ui
基于 shadcn/ui 的开源 UI 组件块库，390+ 预制组件一键装配进 Next.js 项目，支持 AI Agent MCP 集成
加载项目详情…
本应用为开源项目，仅供学习研究，请遵守其开源协议。
微信扫码咨询客服
POMOAI — 让开源 AI 即刻运行
基于 shadcn/ui 的开源 UI 组件块库，390+ 预制组件一键装配进 Next.js 项目，支持 AI Agent MCP 集成
加载项目详情…
本应用为开源项目，仅供学习研究，请遵守其开源协议。
想象一下，你正在搭建一个 SaaS 管理后台，设计师给你出了 40 张高保真设计稿，里面有数据看板、账户设置、账单管理、用户列表……一个一个手写组件？光是「模态框」（Modal）就可能有 5 种变体——普通确认、危险操作、表单提交、成功提示。这通常意味着数百行重复代码，以及和设计师反复对线的夜晚。
Creative Tim UI 就是来解决这个问题的。它不是又一个 React 组件库，而是一个建立在 shadcn/ui 基础之上的「组件块」（Block）库——你可以把它理解成给 AI 编程工具用的「装修材料包」：AI 编程工具只需要调用一条命令，就能把一整块「账单管理页面」直接「拼」进你的项目里，风格统一、代码规范、不用你操心细节。
Creative Tim 不是新面孔。这家来自罗马尼亚的公司从 2016 年起就开始做 UI 主题和模板，在 ThemeForest 上累计售出超过 10 万份，是 Envato 生态里最畅销的前端主题商之一。他们的 Material Dashboard、Argon Dashboard、Black Dashboard 在全球个人开发者和小型团队中有极高的知名度——很多人第一次接触「好看的中后台模板」，就是从 Creative Tim 开始的。
但传统模板有个致命问题：买了就不能改，改了就不维护。随着 React 生态从 class 组件演进到 Hooks，从 CRA 演进到 Vite/Next.js，这些模板很快变得过时。Creative Tim 自己也意识到了这个问题——他们将整个战略重心转向开源，在 shadcn/ui 的组件化哲学上重建自己的产品线。
2024 年，他们正式发布了 Creative Tim UI，一个完全开源、基于 shadcn/ui 的组件块库，并将触手伸向了 AI 编程工具生态——支持 MCP（Model Context Protocol），让 AI Agent 能够直接调用这些组件块。
传统前端开发像手工业：每个组件从零开始雕刻，熟练工人（木工、水电工）各有分工，工期长、品质依赖个人手艺。Creative Tim UI 则像装配式建筑：墙面模块、门窗模块、厨房模块都在工厂里预制好，工人只需要按图纸拼装。AI 编程工具扮演的就是那个「装配工人」的角色——你告诉它「我要一个账单管理页面」，它调用 Creative Tim UI 的 API，把预制好的组件块拼进去，风格一致、代码规范。
这种模式的核心优势在于规模效应：390+ 个组件块由 Creative Tim 的专业设计团队维护，你不用每次重写，AI 每次调用都是「最新版」。
Creative Tim UI 的组件块覆盖四大类场景：
1. Application UI（应用界面）
这是最核心的部分，包含了中后台管理界面中最常见的交互模式。Modals（模态框）提供了 5 种不同场景的块，涵盖普通确认框到危险操作的二次确认；Account（账户管理）有 7 种块，覆盖用户资料编辑、密码修改、头像上传等典型账户设置页面；Billing（账单管理）提供了 5 种块，包括订阅计划展示、发票列表、支付方式管理等。
图1：Modals 组件块展示
图2：Account 组件块展示
图3：Billing 组件块展示
2. Marketing（营销页面）
面向 C 端页面的组件块，包括 17 个 Testimonial（用户推荐）块、15 个 Contact（联系我们）块、16 个 Footer 块、6 个 FAQ 块，以及 15 个 Blog（博客文章）块。这些块对于快速搭建公司官网、活动落地页特别有用，不需要从零设计页脚或「用户怎么说」区域。
图4：Testimonial 用户推荐块
图5：Contact 联系我们块
3. Ecommerce UI（电商界面）
14 个电商专用块，覆盖商品列表、购物车、结算流程等电商核心场景。这些块对创业团队特别有价值——不需要买昂贵的电商模板，用 npx 命令就能把专业级电商页面「装配」进来。
图6：Ecommerce 组件块展示
4. Web 3.0（区块链/加密）
5 个专为 DApp（去中心化应用）设计的组件块，包括钱包连接、链上交易展示、NFT 卡片等。面向加密/区块链类产品的开发者，提供差异化的视觉风格。
Creative Tim UI 的技术选型非常务实：
底层框架：React 18 + TypeScript + Next.js App Router。组件块发布在 npm 上，集成到 shadcn/ui 的 registry 系统中。这意味着如果你已经在用 shadcn/ui，只需要一行命令就能引入 Creative Tim 的组件块：
npx @creative-tim/ui@latest add card
或者通过 shadcn/ui 官方 CLI：
npx shadcn@latest add https://creative-tim.com/ui/r/all.json
Monorepo 结构：项目使用 pnpm workspace + Turborepo 组织 monorepo，包含 apps/www（文档展示站）、mock-api（模拟后端 API）、skills/（AI Agent 技能定义）等包。这种架构在 modern web 开源项目中非常常见，Vercel、Nexxt.js 官方模板也采用类似结构。
MCP 集成：项目包含 skills/creative-tim-ui/ 目录，内含 AGENTS.md 和 SKILL.md，为 AI Agent（特别是 Cursor、Cline 等 AI 编程工具）提供结构化的组件使用指南。这使得 AI 在生成代码时能「理解」Creative Tim UI 的设计语言和组件规范。
测试覆盖：项目包含完整的 E2E 测试套件（Playwright），覆盖登录、登出、注册、密码修改、页面重定向等核心用户路径。这对于一个面向生产环境的 UI 库来说，是质量保障的重要信号。
构建工具：Vite + Vitest + TypeScript ESLint + Prettier，全套现代前端工具链。
门槛非常低，但有一个前提：你需要一个已经初始化好的 Next.js + shadcn/ui 项目。对于有 Node.js 基础的开发者来说，整个流程是：
# 1. 创建 Next.js 项目
npx create-next-app@latest my-app
cd my-app
# 2. 初始化 shadcn/ui
npx shadcn@latest init
# 3. 安装 Creative Tim UI 组件
npx @creative-tim/ui@latest add all
整个过程不超过 10 分钟，前提是你有 Node.js 18+ 环境。
不过需要注意的是：目前没有 Docker 支持。如果你想在完全隔离的环境中部署或预览，需要自己编写 Dockerfile。项目本身不含容器化配置，这一点对于想快速部署到云服务的团队来说是一个小缺憾。但对于本地开发和 CI/CD 流程来说，影响不大。
PRO 版与免费版的边界：Creative Tim UI 有「PRO Blocks」的概念，部分高级组件块需要付费订阅 API Key 才能使用。免费版提供了基础但足够丰富的组件库，PRO 版则针对企业级用户。如果你计划商用，需要确认清楚哪些块需要付费。
依赖 shadcn/ui：这是设计选择，不是缺陷。Creative Tim UI 基于 shadcn/ui 意味着你必须理解 shadcn/ui 的概念和 CLI 工具。对于完全不懂 shadcn/ui 的团队来说，有额外的学习成本。但对于已经用 shadcn/ui 的团队，这反而是优势——生态一致性，不需要再维护两套组件系统。
非中国传统生态：Creative Tim 是罗马尼亚公司，主要面向英文开发者和全球市场。对中文文档、本地化支持不够完善，在中国区的 CDN 加速和本地化生态上不如一些国内 UI 库（如 Ant Design）成熟。
Creative Tim UI 的出现，反映了一个更大的趋势：AI 时代的 UI 开发正在从「手写」走向「装配」。随着 Claude、Cursor、Cline 等 AI 编程工具的能力越来越强，传统的「找到组件 → 复制代码 → 粘贴修改」流程正在被「告诉 AI 我需要什么 → AI 从组件库中拼装」所取代。
390+ 组件块的规模，加上 Creative Tim 十年设计经验积累，让这个项目在质量和数量上都具有竞争力。而 MCP 支持和 AI Agent 技能指南的设计，则是为这个趋势提前布局。
对于中国的 AI 开发者和创业团队来说，Creative Tim UI 提供了另一种选择：不需要自己设计 UI，不需要买昂贵的商业模板，用开源工具 + AI 编程工具就能快速拼装出专业级前端界面。这对 AI 应用开发浪潮中的「MVP 优先」团队特别有意义。
GitHub 11,895 Star 的规模说明市场对这类工具有真实需求。随着 shadcn/ui 生态持续壮大和 AI 编程工具的普及，Creative Tim UI 这条「装配式 UI」的路子，很可能会成为前端开发的新常态。