讀懂 UI 元件庫：不從零畫，站在元件庫的肩膀上

按鈕、輸入框、對話框、下拉選單這些元件都需要無障礙、鍵盤操作、暗色模式的支援，自己從零做要花很久，而且 AI 的訓練資料裡就有大量元件庫的範例，用元件庫反而能讓 AI 生出更準確的前端程式碼。

這篇帶你認識最常被 AI 使用的 shadcn/ui，學會安裝、讀文件、用常見元件，以及怎麼把整個 App 換成你自己的品牌色。

常見元件庫比較

shadcn/ui：安裝與使用

shadcn/ui 不是傳統的 npm 套件，而是把元件程式碼複製到你的專案裡，你擁有完整的程式碼可以修改。

# 初始化（Next.js 專案）
npx shadcn@latest init

# 新增元件（程式碼會複製到 components/ui/）
npx shadcn@latest add button
npx shadcn@latest add input card dialog

# 在程式碼裡使用
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardHeader, CardContent } from "@/components/ui/card"

讀懂元件庫的文件

每個元件的文件通常包含 Props 列表、使用範例、客製化方式，重點是看懂 Props 的型別和預設值。

// variant 控制樣式，size 控制大小
<Button variant="default">預設按鈕</Button>
<Button variant="destructive">刪除</Button>
<Button variant="outline" size="sm">小按鈕</Button>
<Button disabled>不可點擊</Button>
<Button onClick={handleClick}>有事件</Button>

常用元件速查

客製化：改顏色和樣式

shadcn/ui 用 CSS 變數管理顏色，修改 globals.css 裡的變數就能改變整個主題。

:root {
  /* 主色 */
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;

  /* 改成你的品牌色，紅色系 HSL */
  --primary: 0 80% 40%;
}

給 AI 生 UI 的提示詞範例

我用 Next.js 14 加 TypeScript 加 shadcn/ui 加 Tailwind CSS。
請幫我做一個天氣查詢的主頁面：

功能需求：
- 頂部有搜尋欄（Input 加 Button）
- 搜尋後顯示天氣卡片（Card）
- 卡片顯示城市名稱、溫度、天氣描述
- 載入中顯示 Skeleton

設計要求：
- 整體垂直置中，最大寬度 600px
- Button 用 variant="default"
- 城市名稱用 h2，溫度用大字

請使用正確的 shadcn/ui 元件 import 路徑：

UI 生成後必做的三個確認

1. import 路徑是否正確（是否已先用 add 指令安裝那個元件）。
2. Props 名稱是否符合元件文件（不同版本的 shadcn Props 可能不同）。
3. TypeScript 型別有沒有錯誤（編輯器出現紅線就要修）。

下一步的練習：在你的 Next.js 專案裡執行安裝指令，把 Card、Input、Button 這三個元件裝進去，請 AI 幫你組合出搜尋欄和天氣卡片的介面，再到官方主題頁挑一個喜歡的主題，把 CSS 變數貼進 globals.css，確認整個 App 的視覺風格跟著換了。