awesome-shadcn-ui
shadcn/ui 生态资源大全，20k+ stars 的社区维护清单
加载项目详情…
本应用为开源项目，仅供学习研究，请遵守其开源协议。
微信扫码咨询客服
POMOAI — 让开源 AI 即刻运行
shadcn/ui 生态资源大全，20k+ stars 的社区维护清单
加载项目详情…
本应用为开源项目，仅供学习研究，请遵守其开源协议。
"如果你在用 shadcn/ui，这篇资源清单是你每天都会打开的书签。"
2023年，前端开发者 shadcn 在 GitHub 上发布了一个看似"反常识"的主张：不是 npm install 一个组件库，而是把组件代码直接复制到你的项目里。没有任何封装黑盒，没有 npm 包的隐性依赖，你拥有每一个按钮、每一行对话框代码的完整所有权。
这个"copy-paste + 维护"而非"install + 升级"的思路，迅速点燃了社区。三年后的今天，shadcn/ui 已成为 React 生态最炙手可热的 UI 框架之一，围绕它形成的组件库、模板、工具、移植项目已超过 400+ 个。
而 awesome-shadcn/ui 正是这个庞大生态的"地图"——一个由社区自发维护的精选资源列表，目前已收录超过 500 个与 shadcn/ui 相关的开源项目，涵盖组件库、动画块、模板、主题、工具、插件以及跨框架移植版本。
awesome-shadcn/ui 由独立开发者 birobirobiro 创建并持续维护，托管于 GitHub（MIT License），配套有生产级网站 awesomeshadcn.dev。
项目的核心理念与 shadcn/ui 本身一脉相承：开放、透明、社区驱动。任何人都可以通过 GitHub PR 或网站内置表单提交新的资源，经维护者审核后合并进列表。这种去中心化的维护方式确保了资源池的高速更新——几乎每隔几天就有新的组件库或工具被添加进来。
在深入资源清单之前，有必要理解 shadcn/ui 的设计哲学。
传统 UI 库（如 Material UI、Ant Design）的使用模式是：
npm install @mui/material → <Button>点击</Button>
你获得一个黑盒，每次版本更新需要 npm update，内部样式和行为你无权修改。
shadcn/ui 的使用模式是：
npx shadcn@latest add button
# 代码被复制到 components/ui/button.tsx，你完全拥有它
这带来三个核心优势：
| 优势 | 说明 |
|---|---|
| 100% 可定制 | 代码在你手里，修改样式/行为无需 fork 依赖 |
| 无隐性依赖 | 不存在"升级 A 导致 B 样式错乱"的版本地狱 |
| 学习曲线陡峭但回报高 | 直接接触 Radix UI 底层，理解 Accessibility 原理 |
这份资源清单按照资源类型分为多个章节，以下是核心分类与代表性项目：
这些项目在 shadcn/ui 基础上扩展了更多高级组件，是 awesome-shadcn/ui 最核心的收录类型：
Blocks 是比单个组件更大的 UI 单元，通常是一个完整的功能区块（Hero、CTA、Pricing 等）：
开箱即用的完整项目模板，适合快速启动新应用：
shadcn/ui 的核心理念正在向其他框架扩散：
| 目标框架 | 移植项目 | 特点 |
|---|---|---|
| Vue 3 | svelte-shadcn-vue | Vue 生态的 shadcn 风格组件 |
| Svelte | svelte-shadcn-svelte | Svelte 移植版 |
| Solid.js | solid-shadcn-solid | Solid 移植版 |
| Flutter | flutter-shadcnui | React Native / Flutter 移植 |
| Swift | swift-swiftcn-ui | iOS/macOS Swift 移植 |
| Ruby on Rails | ruby-shadcn-rails | Rails 视图组件 |
| Rust (EGUI) | rust-ouroboros-ui | Rust GUI 移植 |
| Kotlin | kotlin-shadcn-kotlin | Android Kotlin 移植 |
awesome-shadcn/ui 本身就是一个完整的 Next.js 应用，而非简单的静态列表页。
技术栈：
项目结构：
src/
app/ # Next.js App Router 页面路由
components/ # shadcn/ui 组件 + 自定义业务组件
hooks/ # 自定义 React Hooks
lib/ # 工具函数（utils、API 调用等）
providers/ # React Context 提供者（主题、语言等）
README 的解析和页面生成由自定义脚本驱动，所有资源数据存储在 README.md 本身，通过解析 Markdown 动态渲染分类页面。默认分支的 next.config.mjs 中配置了大量重定向规则（/categories/ports/*），以保持历史 URL 的兼容性。
代码质量评估：
项目使用了 ESLint + Prettier + TypeScript 严格模式，代码规范性较高。缺少自动化测试框架，但作为文档型/展示型应用，影响有限。
好消息：本地开发极其简单。
# 克隆项目
git clone https://github.com/birobirobiro/awesome-shadcn-ui.git
cd awesome-shadcn-ui
# 安装依赖
pnpm install
# 启动开发服务器
pnpm dev
# → http://localhost:3000
生产部署：
@opennextjs/cloudflare 适配，需要额外运行 pnpm deployDocker 支持：无。项目未提供 Dockerfile 或 docker-compose.yml。如果你需要容器化部署，需要自行编写 Dockerfile，基于 node:20-alpine 构建。
Quick Deploy 评级：partially_supported
Web UI 完整，但缺少标准化容器化方案。
awesome-shadcn/ui 的 Star 数量（20,300+）本身就是 shadcn/ui 生态活力的证明。但更值得关注的是这个生态代表的前端开发范式转变：
1. AI 时代的默认 UI 库
随着 Claude、Cursor 等 AI Coding 工具的普及，shadcn/ui 正在成为 AI 生成代码的首选"输出格式"。Tony Dinh（@tdinh_me）在 Twitter 上写道："Being the default UI lib of LLMs is incredible 🫡"。当 AI 能够生成 shadcn 组件代码时，这些组件的可读性和可修改性变得尤为关键——这正是 copy-paste 模式相较于 npm 黑盒的根本优势。
2. 从"选框架"到"选风格"的转变
传统 UI 库时代，开发者会在 Material Design、Ant Design、Bulma 之间做框架级选择。今天，开发者倾向于先选 shadcn/ui 作为基础，再通过 Aceternity UI、Magic UI、Tailark 等风格库来实现差异化。这带来更细粒度的定制能力和更低的框架锁定风险。
3. 社区驱动的组件分发实验
shadcn/ui 的 CLI 工具 + GitHub 作为 CDN 的模式，正在挑战传统的 npm 分发机制。虽然仍有争议（版本管理、依赖更新等问题），但它展示了社区驱动、开放维护的组件生态可以走多远。
尽管 awesome-shadcn/ui 本身维护出色，但 shadcn/ui 生态也存在一些值得关注的问题：
| 问题 | 说明 |
|---|---|
| 版本管理碎片化 | shadcn/ui 官方不保证向后兼容，大量第三方库版本跟进压力大 |
| 文档 vs 实际代码差距 | 某些高级组件文档质量参差不齐 |
| AI 生成的代码质量 | 社区中存在大量"看起来炫酷但 Accessibility 不达标"的组件 |
| 学习曲线 | copy-paste 模式对新手不友好，缺乏 npm install 那种即插即用的体验 |
awesome-shadcn/ui 是 shadcn/ui 生态不可或缺的基础设施。对于正在使用或打算使用 shadcn/ui 的开发者，它是一个发现新工具、对比组件库、寻找模板的高效入口。对于前端生态的观察者，它是理解 2024-2026 年 React 开发范式转变的最佳窗口。
适合谁使用： React/Next.js 开发者、UI 设计师、对现代组件化开发感兴趣的技术人员。
不适合谁： Vue/Angular 开发者（虽然有移植版，但原生支持有限）、需要 jQuery/Bootstrap 类传统 UI 框架的场景。