安裝與 CLI
安裝 Skies.ui:skies-ui init/add、components.json、registry、monorepo、registryBaseUrl;Bun/npm/pnpm/yarn 與 CLI 選項。
安裝與 CLI
常用指令已列在 首頁。本頁補充 registry、本機開發 與邊角情境。
前置需求
- Bun 或 Node 20+
- 專案根目錄有
package.json的 React 應用(Next、Vite 等)
取得 CLI
| 情境 | 指令 |
|---|---|
| 已發佈、在使用者專案 | bunx、npx、pnpm dlx、yarn dlx(見首頁分頁) |
| 從原始碼執行 CLI(貢獻者) | 依你 clone 的倉庫說明執行 bun run skies-ui -- … |
init / list / add
skies-ui init
skies-ui list
skies-ui add badge已存在檔案預設不覆寫;加 --force 覆寫。
檔案位置與 import 路徑
add 會依 components.json 的 aliases(以及專案結構)把元件寫入你的程式庫,常見為 components/ui/<名稱>.tsx。實際匯入請對照本機路徑,例如:
import { Card } from "@/components/ui/card";本文件站的程式片段有時使用 @skies-ui/ui,僅為在 monorepo 內示範;與你專案在 add 之後的路徑可能不同。
第三方依賴與 --install
add 完成後,CLI 會依你專案裡的 lockfile 推斷套件管理器(bun / pnpm / npm / yarn),並列出 四種 對應的安裝指令。第三方套件版本區間與 @skies-ui/ui 對齊(Radix、class-variance-authority、clsx、tailwind-merge);已在 package.json 的 dependencies / devDependencies / optionalDependencies / peerDependencies 裡宣告過的套件會略過。
加 --install 可立刻執行「偵測到的那一套」安裝(例如偵測到 pnpm 就跑 pnpm add …):
skies-ui add select --installRegistry(HTTPS,建議)
正式整合請讓 CLI 經 HTTPS 拉檔。部署本文件站後,公開網址下會有路徑 /registry/(內含 registry.json、utils.ts、components/*.tsx 等,由建置流程產出)。
在使用者專案的 components.json 設定:
"registryBaseUrl": "https://你的網域/registry"或使用環境變數 SKIES_UI_REGISTRY_URL(優先於 JSON;可含或不含結尾 /,CLI 會正規化)。
本機元件來源(選用、進階)
若不使用 HTTPS,且你本機已有一份元件原始碼樹(根目錄須有 utils.ts 與 components/ 資料夾),可設定 SKIES_UI_ROOT 指向該根目錄。一般情境請以 HTTPS registry 為主。
Yarn 1
無 yarn dlx 時請用 npx,或升級 Yarn Berry。
樣式
元件需 Tailwind 與 語意 CSS 變數 → 主題與樣式。