当前位置：首页 > news >正文

shadcn 使用步骤与注意点

news 来源：原创 2025/6/22 11:59:05

一、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 排序好看方便