目錄

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

---

五、總結

使用效果如下：