今天不廢話，直接來看看 shadcn 如何安裝與操作吧，其實官方文件也有針對不同框架指導安裝流程～真的是貼心小棉襖><，今天就用選擇我公司的專案框架 Next.js 跟著文件做：

1. 建立 Next.js 專案並指向該專案
   （因為 Shadcn 支援 Typescript，所以需要 TS 的人可以放心按下 yes）
   記得專案內一定要先安裝好 tailwind，無論是手動裝好或是順便一起裝都行，否則安裝 shadcn 時會報錯

   npx create-next-app@latest shadcn-learning
   cd shadcn-learning
   

   

2. 安裝 shadcn

   npx shadcn@latest init
   

   這邊會詢問使用者想選哪種 base color，如果沒有特別需求，就隨便選一個即可
   
   等待終端機的檢查訊息跑完，看到 success，就能開始使用 shadcn
   
   我們可以再看仔細一點，安裝完成後，專案內會在根目錄多出components.json，這個檔案是 shadcn 的設定檔，主要負責記錄「專案是如何安裝、管理元件的資訊」；而lib資料夾下會多出utils.ts，預設中包含 cn 函式，主要統一管理 className 合併，避免手寫很多判斷或衝突；global.css 中也會多出一些預設的樣式變數。

3. 使用元件
   假設需要使用 shadcn 的 button 元件

   npx shadcn@latest add button
   

   之後會在 components 資料夾下多出 ui資料夾，裡面會多出 button.tsx。ui 資料夾集中管理官方包好的 Radix UI + Tailwind 基礎元件，可以在專案中直接在引用該元件，更能直接編輯該檔案，用 tailwind 將元件修改成自己需要的樣子。比起 Ant Design，shadcn 能夠看見完整的程式碼，客製化更透明容易，真的是開發前台的好幫手啊><

下篇終於能來講講 shadcn + tailwind 客製化組合技，我們明天見啦～