shadcn/ui
ui.shadcn.com可复制到自己代码库的 React UI 组件集合，适合需要掌控样式和源码的 SaaS 项目。
官方首页截图
打开官网
Tool profile
shadcn/ui 是什么?
shadcn/ui 不以 npm 黑盒组件包为核心，而是将基于 Radix UI 的组件源码复制进你的项目。你可以直接修改样式、交互和无障碍细节，适合把后台界面快速搭出基础骨架。
shadcn/ui 能做什么?
01
适合谁
使用 React、Tailwind，并希望组件源码归自己维护的团队
02
解决什么问题
在速度和可定制性之间取得平衡，避免从空白状态手写常用控件
03
价格与成本
价格、免费额度和政策会变化；采购前请以官网当前的计划、用量限制和地区政策为准。
04
推荐使用场景
管理后台、SaaS 设置页、需要统一视觉的 MVP
05
主要替代品
radix-ui、mantine、chakra-ui
06
选型判断
先挑按钮、表单、弹窗和表格等核心组件建立基线，再逐步扩展，不要整库无差别复制。
使用场景
“管理后台：使用 React、Tailwind，并希望组件源码归自己维护的团队，重点是在速度和可定制性之间取得平衡，避免从空白状态手写常用控件。
“SaaS 设置页：使用 React、Tailwind，并希望组件源码归自己维护的团队，重点是在速度和可定制性之间取得平衡，避免从空白状态手写常用控件。
“需要统一视觉的 MVP：使用 React、Tailwind，并希望组件源码归自己维护的团队，重点是在速度和可定制性之间取得平衡，避免从空白状态手写常用控件。
需要注意
组件进了你的仓库，也意味着升级和一致性由你负责；复制很多组件前要先确定自己的设计令牌。
先挑按钮、表单、弹窗和表格等核心组件建立基线，再逐步扩展，不要整库无差别复制。