安裝 Pro 元件

Pro 元件與模板的三種安裝方式：上線活動期間登入即免費、授權金鑰設定、以及短效安裝連結。

免費元件不需要任何設定，npx shadcn@latest add https://webberui.com/r/split-text.json 就會裝好。 Pro 元件與整頁模板需要先證明你有權限——這頁講的就是怎麼做。

我拿到的是 401 錯誤

Something went wrong. You are not authorized to access the item at
https://webberui.com/r/card-stack-scroll.json

代表這是 Pro 項目，而你的指令沒有帶上憑證。往下挑一種方式。

上線活動期間：註冊就能裝，不用付費

目前全部 205 個 Pro 項目在活動期間開放給所有註冊使用者，不需付費、不用綁信用卡。在站上登入後，到任一元件頁按「複製安裝指令」，拿到的連結就已經帶好憑證（見下方「方式 A」）。

活動結束後恢復付費，但你在活動期間裝進專案的元件永遠是你的——元件安裝後就是你 repo 裡的程式碼，不連我們的伺服器、沒有執行期驗證、沒有到期失效機制。

方式 A：從站上複製安裝指令（最快，不用設定任何東西）

在 webberui.com 登入（支援 Google 與 GitHub 一鍵註冊）。
打開想裝的元件頁，按 「複製安裝指令」。
貼到終端機執行。

複製到的會是一條帶短效 token 的網址：

npx shadcn@latest add "https://webberui.com/r/card-stack-scroll.json?t=<token>"

那個 token 15 分鐘後失效，而且只綁定這一個資源。這樣設計是為了讓你可以把整條指令直接貼給 AI agent（Cursor、Claude Code…）執行，而不必把長效授權金鑰交出去—— 金鑰一旦進了 query string，就會被寫進伺服器與 CDN 的存取日誌。

方式 B：授權金鑰 + namespace（適合團隊與 CI）

要在專案裡長期使用、或讓 CI 也能安裝，就設定一次 components.json：

components.json

{
  "registries": {
    "@webberui": {
      "url": "https://webberui.com/r/{name}.json",
      "headers": { "Authorization": "Bearer ${WEBBERUI_KEY}" }
    }
  }
}

然後把金鑰放進環境變數（不要寫死在 components.json 裡，那個檔案會進版控）：

export WEBBERUI_KEY=<你的授權金鑰>
npx shadcn@latest add @webberui/card-stack-scroll

設定完之後，免費元件也可以用同一個短名稱安裝，不需要金鑰：

npx shadcn@latest add @webberui/split-text

`${WEBBERUI_KEY}` 要原樣寫進 JSON

那個 ${...} 是 shadcn CLI 自己展開的，不是 shell 展開的。JSON 檔裡就是字面上的 "Bearer ${WEBBERUI_KEY}"，CLI 會在送出請求時從環境變數取值。

金鑰放哪裡：

情境	建議做法
本機開發	`~/.zshrc` 或專案的 `.env.local`（確認 `.env*` 已在 `.gitignore`）
GitHub Actions	Repository secrets → 在 workflow 裡 `env: WEBBERUI_KEY: ${{ secrets.WEBBERUI_KEY }}`
Vercel / Cloudflare	專案設定的 Environment Variables

方式 C：整頁模板與組裝好的頁面

模板與「區段組裝器」產出的整頁，走的是同一套授權：

# 單一模板
npx shadcn@latest add https://webberui.com/r/restaurant-bistro.json

# 組裝器產出的整頁（區段可自由挑選、排序）
npx shadcn@latest add "https://webberui.com/api/compose?s=<區段 id 列表>"

一樣是「登入後從站上複製指令」或「設好 Authorization header」二選一。組裝器的網址請直接從 /composer 複製，不要手打——區段 id 有白名單比對。

安裝之後

元件源碼會落在你的 components/ui/（模板落在 app/），完全是你的程式碼，可以隨意修改。
每個元件都依賴 motion，CLI 會自動幫你裝。
共用的 cn() 工具函式在 lib/utils.ts，CLI 也會一併建立。手動複製元件的話記得自己補上：

lib/utils.ts

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

還是裝不起來？

症狀	原因與解法
`Unknown registry "@webberui"`	還沒設定 `components.json` 的 `registries`——見方式 B，或改用完整 URL 形式
`404 not found`	元件名稱打錯了。到元件總覽確認正確的 slug
`401 pro_license_required`	這是 Pro 項目，但指令沒帶憑證——見方式 A 或 B
token 連結失效	短效 token 只活 15 分鐘，回站上重新複製一次
沒有 `components.json`	先在你的專案跑一次 `npx shadcn@latest init`

還是卡住的話寄信給 official@teyrallc.com，把你跑的完整指令與錯誤訊息一起附上。