蜡笔猫导航

shadcn/ui

一套可直接复制进项目的 React 组件集合,代码归你所有,可自由修改与扩展,用来快速搭建自己的组件库。

UI 组件库免费ReactTailwindTypeScript可复制组件组件库设计系统
shadcn/ui(可复制粘贴的 React 组件集合) 官网预览

它能做什么

  • 组件源码直接放进项目,代码可自由修改与扩展
  • 基于 TypeScript 编写,MIT 许可证可商用
  • 注重可访问性与合理的默认样式
  • 可作为自建组件库或设计系统的基础

适合谁

  • 前端团队搭建自有设计系统与组件库
  • React 项目需要可深度定制的 UI 组件
  • 想避免被第三方组件库样式绑死的开发者

详细介绍

shadcn/ui 是一套面向 React 项目的组件集合,它不是通过 npm 包黑盒引入,而是把组件源码放进项目里,让你直接拥有并维护这些代码。仓库以 TypeScript 编写,采用 MIT 许可证,官网提供文档与示例。

组件在可访问性和默认样式上做了较周到的处理,同时依赖 Tailwind CSS 与 Radix UI 一类的基础能力,因此样式和交互都能按项目需要改写。适合想摆脱「只能靠 props 微调」的团队,用它作为自有设计系统或组件库的起点。

使用方式偏向「按需取用」:从文档或仓库拿到某个组件的源码,放进项目后再按自己的设计规范调整;也可以把多个组件组合成完整的界面层。仓库 topics 中带有生成式 UI、AI 等关键词,但来源未说明具体的 AI 功能,此处不作展开。