网上营销网站泰州网站优化公司
目录
一、shadcn ui
二、使用流程
1.安装
2.颜色与主题
3.引用blocks
三、使用注意点
四、推荐搭配工具
五、总结
一、shadcn ui
官网：Build your component library - shadcn/ui
为何选择它？因为它是一个基于 Tailwind CSS + Radix UI 的组件集合，它不像传统组件库（比如 AntD 或 MUI）那样是一个 npm 包，而是 提供组件代码让你复制到项目中，你拥有完全的控制权——没错，控制权！这样我就会节省很多时间去开发一套常见又琐碎的组件，我可以专注与根据设计稿还原界面。而且我确实更喜欢使用工具，我对 react 还不是很熟练，正好可以学习别人的代码是一套怎样的规范逻辑。
二、使用流程
react 18或者 19，现在可以 19，但是官网推荐 18。并且要先安装tailwind css。
tailwind文档：Installing Tailwind CSS with Vite - Tailwind CSS
shadcn ui 安装：Installation - shadcn/ui
1.安装
根据当前的构建工具选择合适的版本，我是vite，因为推荐Tailwind v4，所以我使用的也是这个。
根据文档下载到项目里，会出现一个文件夹：src/components和配置文件components.json。
2.颜色与主题
设置样式文件：默认是 ./app/globals.css 或 src/index.css。这个库也会根据你下载的组件，进行一些主题的设置补充，比如一些颜色--color-sidebar-primary等等。你也可以选择主题，copy code 到代码里。
3.引用blocks
因为大多数项目需要一个 header、sidebar、layout俩规划页面的整体布局，登录页（后面试试）等等，所以可以查看这里来获取自己想要的布局和页面效果：
Building Blocks for the Web - shadcn/ui
我喜欢sidebar7，于是：
npx shadcn@latest add sidebar-07执行后的下载结果如下：
三、使用注意点
补充这个组件库的一些知识，来自gpt：
1. 你拥有代码的所有权
所有组件都是本地文件，可以随意改造。
更新组件不是通过升级版本，而是 重新 add 一遍组件。
2. 依赖 Tailwind CSS & Radix UI
所有交互（如弹窗、popover、switch）是用 Radix UI 实现的。
如果你对无障碍（a11y）有要求，这是加分项。
3. 组件样式是通过 CSS 变量实现的设计系统
text-primary实际是：.text-primary { color: var(--primary); }如果你用的是默认主题，会有这些变量：
--primary,--secondary,--muted等你可以在
tailwind.config.ts的extend.theme中改，也可以在:root自定义：:root { --primary: #6366f1; --primary-foreground: #ffffff; }4. 按需添加组件即可
没必要一次性加完所有组件。
想用哪个组件就
npx shadcn-ui@latest add xxx。
后面开发的时候如果遇到其他注意点，我会继续补充进去。
四、推荐搭配工具
| 工具 | 用法 |
|---|---|
clsx / classnames | 处理 className 逻辑 |
tailwind-variants | 做组件的变体（variant）管理 |
lucide-react | 图标库，shadcn 默认使用的 |
prettier-plugin-tailwindcss | Tailwind class 排序好看方便 |
五、总结
使用效果如下：
