shadcn MCP

shadcn MCP 是 shadcn/ui 官方提供的 MCP Server，讓 Claude Code 能夠直接存取 shadcn/ui 元件庫，取得正確的 props、使用範例和安裝指令。

為什麼需要 shadcn MCP？

問題	沒有 MCP	有 MCP
元件 API	可能使用過時語法	直接從 registry 取得最新 API
Props 定義	可能產生不存在的 props	正確的 TypeScript 定義
安裝指令	可能版本錯誤	正確的安裝命令
範例程式碼	可能是舊版範例	官方最新範例

沒有 shadcn MCP：
Claude 根據訓練資料產生元件程式碼
→ 可能使用已變更的 API
→ 可能缺少必要的 props
→ 可能漏掉相依元件

有 shadcn MCP：
Claude 直接查詢 shadcn/ui registry
→ 正確的 TypeScript props
→ 完整的範例程式碼
→ 正確的安裝流程

安裝方式

方法 1：官方 CLI（推薦）

使用 shadcn CLI 自動設定：

bash

npx shadcn@latest mcp init --client claude

其他 package manager：

bash

# pnpm
pnpm dlx shadcn@latest mcp init --client claude

# yarn
yarn dlx shadcn@latest mcp init --client claude

# bun
bunx --bun shadcn@latest mcp init --client claude

方法 2：手動 JSON 設定

在 ~/.claude.json 或 .mcp.json 中加入：

json

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://www.shadcn.io/api/mcp"]
    }
  }
}

連線時間

首次連線約需 10 秒建立與 shadcn registry 的連線。

方法 3：多框架支援（社群）

使用 @jpisnice/shadcn-ui-mcp-server 支援多個框架：

bash

# React（預設）
npx @jpisnice/shadcn-ui-mcp-server

# Svelte
npx @jpisnice/shadcn-ui-mcp-server --framework svelte

# Vue
npx @jpisnice/shadcn-ui-mcp-server --framework vue

# React Native
npx @jpisnice/shadcn-ui-mcp-server --framework react-native

使用方式

安裝完成後，在 Claude Code 中直接詢問 shadcn/ui 相關問題：

Show me how to use the Button component from shadcn/ui

What props does the Dialog component accept?

Install the Card component

Claude 會自動使用 shadcn MCP 取得正確資訊。

提供的工具

shadcn MCP 提供以下工具：

1. get_project_registries

取得專案設定的 registry 列表（從 components.json）。

2. list_items_in_registries

列出 registry 中的所有元件：

List all available shadcn/ui components

3. search_items_in_registries

搜尋元件：

Search for form-related components in shadcn/ui

4. view_items_in_registries

查看元件詳情（名稱、描述、類型、檔案內容）：

Show me the details of the Button component

5. get_item_examples_from_registries

取得元件的使用範例：

Show me examples of using the Accordion component

6. get_add_command_for_items

取得安裝元件的指令：

How do I install the Popover component?

回覆：npx shadcn@latest add popover

7. get_audit_checklist

建立新元件後的驗證清單。

使用範例

查詢元件 API

What are the variants available for Button in shadcn/ui?

Claude 會查詢 registry 並回覆：

typescript

// Button variants
variant: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
size: "default" | "sm" | "lg" | "icon"

建立表單

Create a login form with email and password fields using shadcn/ui

Claude 會：

查詢需要的元件（Form、Input、Button、Label）
產生安裝指令
產生完整的表單程式碼

建立複雜 UI

Create a data table to display users with sorting and filtering using shadcn/ui

Claude 會查詢 DataTable 元件並產生完整實作。

取得安裝指令

What components do I need to install for a command palette?

Claude 會回覆需要安裝的元件和指令：

bash

npx shadcn@latest add command dialog

配合 Context7 使用

可以同時使用 shadcn MCP 和 Context7 獲得最佳效果：

Create a Server Component using the Card component from shadcn/ui - use context7

這樣可以確保：

shadcn/ui 元件用法正確（from shadcn MCP）
Next.js Server Component 語法正確（from Context7）

專案設定

初始化 shadcn/ui

如果專案尚未設定 shadcn/ui：

bash

npx shadcn@latest init

這會建立 components.json 設定檔。

components.json 範例

json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  }
}

驗證安裝

在 Claude Code 中執行：

/mcp

應該會看到 shadcn 顯示為 connected。

測試是否正常運作：

List all available shadcn/ui components

故障排除

MCP 無法連線

確認網路連線正常
重新啟動 Claude Code
檢查 MCP 設定：
```
/mcp
```

元件安裝失敗

確認專案已經初始化 shadcn/ui：

bash

npx shadcn@latest init

找不到某個元件

shadcn/ui 持續新增元件。確認你查詢的元件名稱正確：

List all components that contain "dialog" in their name

最佳實踐

1. 先查詢再使用

❌ 不好：直接讓 Claude 產生元件程式碼
✅ 好：先詢問元件的 props 和用法，再讓 Claude 產生程式碼

2. 使用範例作為起點

Show me the dialog-demo example from shadcn/ui

然後基於範例修改。

3. 一次安裝需要的元件

What components do I need to build a settings page with forms and dialogs?

然後一次安裝：

bash

npx shadcn@latest add form dialog input label button

shadcn MCP

為什麼需要 shadcn MCP？

安裝方式

方法 1：官方 CLI（推薦）

方法 2：手動 JSON 設定

方法 3：多框架支援（社群）

使用方式

提供的工具

1. get_project_registries

2. list_items_in_registries

3. search_items_in_registries

4. view_items_in_registries

5. get_item_examples_from_registries

6. get_add_command_for_items

7. get_audit_checklist

使用範例

查詢元件 API

建立表單

建立複雜 UI

取得安裝指令

配合 Context7 使用

專案設定

初始化 shadcn/ui

components.json 範例

驗證安裝

故障排除

MCP 無法連線

元件安裝失敗

找不到某個元件

最佳實踐

1. 先查詢再使用

2. 使用範例作為起點

3. 一次安裝需要的元件

4. 搭配其他 MCP

參考資源

下一步

shadcn MCP ​

為什麼需要 shadcn MCP？ ​

安裝方式 ​

方法 1：官方 CLI（推薦） ​

方法 2：手動 JSON 設定 ​

方法 3：多框架支援（社群） ​

使用方式 ​

提供的工具 ​

1. get_project_registries ​

2. list_items_in_registries ​

3. search_items_in_registries ​

4. view_items_in_registries ​

5. get_item_examples_from_registries ​

6. get_add_command_for_items ​

7. get_audit_checklist ​

使用範例 ​

查詢元件 API ​

建立表單 ​

建立複雜 UI ​

取得安裝指令 ​

配合 Context7 使用 ​

專案設定 ​

初始化 shadcn/ui ​

components.json 範例 ​

驗證安裝 ​

故障排除 ​

MCP 無法連線 ​

元件安裝失敗 ​

找不到某個元件 ​

最佳實踐 ​

1. 先查詢再使用 ​

2. 使用範例作為起點 ​

3. 一次安裝需要的元件 ​

4. 搭配其他 MCP ​

參考資源 ​

下一步 ​

shadcn MCP

為什麼需要 shadcn MCP？

安裝方式

方法 1：官方 CLI（推薦）

方法 2：手動 JSON 設定

方法 3：多框架支援（社群）

使用方式

提供的工具

1. get_project_registries

2. list_items_in_registries

3. search_items_in_registries

4. view_items_in_registries

5. get_item_examples_from_registries

6. get_add_command_for_items

7. get_audit_checklist

使用範例

查詢元件 API

建立表單

建立複雜 UI

取得安裝指令

配合 Context7 使用

專案設定

初始化 shadcn/ui

components.json 範例

驗證安裝

故障排除

MCP 無法連線

元件安裝失敗

找不到某個元件

最佳實踐

1. 先查詢再使用

2. 使用範例作為起點

3. 一次安裝需要的元件

4. 搭配其他 MCP

參考資源

下一步