技能介绍

为什么需要这个组件库

React 项目中常见的 UI 组件库要么样式定制困难，要么组件内部结构不透明，团队在技术选型时经常面临两难：使用成熟的第三方库会限制设计灵活性，而自行开发则要投入大量时间处理可访问性和键盘导航等基础问题。shadcn/ui 的出现就是为了解决这个困境。

组件如何工作

这个组件库的核心理念是复制而非安装。所有组件基于 Radix UI 原语构建，确保了可访问性和行为正确性，然后通过 Tailwind CSS 进行样式定制。当你使用这个技能时，组件源码会直接进入你的项目，你可以看到每个组件的完整实现，包括所有状态管理和样式逻辑。

关键能力包括：

40+ 开箱即用的组件，覆盖按钮、表单、对话框、导航等常见场景
完整的 TypeScript 类型支持，所有组件都有严格的类型定义
变体系统，允许你通过配置快速切换组件外观
主题支持，可以轻松自定义设计系统

适用边界与注意事项

虽然这个方案提供了极高的灵活性，但也有一些使用条件需要注意。组件库要求 React 18+、Tailwind CSS 3.x+ 和 Node.js 18+ 的环境。由于组件源码会直接复制到项目中，建议你在生产环境使用前先审阅上游仓库的源码质量。另外，这种复制模式意味着组件更新需要你手动同步，不适合追求完全托管依赖的团队。