shadcn/ui
ui.shadcn.com又名 Shadcn UI、shadcn
开源的 React 组件集合,基于 Radix UI 和 Tailwind CSS,把按钮、对话框、表单等源码放在文档站供按需复制,适合想统一团队组件风格、又不愿被第三方库默认样式绑住的前端开发者。
工具免费不用登录网页英文开源

shadcn/ui 是一套 React 组件集合,解决的是「设计系统从零搭」的问题。它不提供 npm 包,而是把每个组件的源码放在文档站上,你按需复制到自己的项目里,再按业务改样式和行为。组件基于 Radix UI 的无障碍原语和 Tailwind CSS 的原子类,默认样式克制,留出足够的定制空间。
主要功能
文档站按组件分类列出按钮、对话框、表单、图表、日历等常见界面元素,每个组件页给出安装命令、示例代码和可交互预览。页面里还演示了账户设置、支付限额、通知偏好等组合场景,方便对照真实界面理解用法。站点提供搜索框,可以按组件名快速定位。
适合谁
适合已经用 React 和 Tailwind CSS 的前端开发者,尤其是想统一团队组件风格、又不想被第三方组件库的默认样式绑住的项目。如果你需要开箱即用的完整设计系统,或者项目不用 Tailwind,这套东西的收益会打折扣。
费用与限制
源码在 GitHub 上公开,文档站可直接访问,没有看到付费墙或登录要求。组件以复制粘贴方式引入,后续升级需要自己跟进上游改动,不像 npm 依赖那样一条命令更新。界面语言为英文,中文资料需要另找。
常见问题
shadcn/ui 收费吗?
shadcn/ui 免费使用。
用 shadcn/ui 要登录吗?
不用登录就能用。
shadcn/ui 有哪些平台 / App?
支持 网页。
shadcn/ui 的替代品有哪些?
本站整理了 7 个替代品,例如 HeroUI、HeroUI、shadcn/vue、Radix UI。