> ## Documentation Index
> Fetch the complete documentation index at: https://supastack.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt

# UI 套件與區塊

共享元件、設計令牌與區塊目錄。

## 開始之前

使用“檔案”→“開啟資料夾”在 Visual Studio Code 中開啟下載的 supastack 專案，然後選擇“終端”→“新建終端”。儲存庫根目錄是包含 package.json、apps 和 packages 的資料夾。執行下面的命令並保持終端開啟。如果無法識別命令，請先完成工具安裝指南，然後再繼續。

首先閱讀平臺教程。伺服器是響應瀏覽器或電話請求的應用程式程式。 Web 讀取 apps/web/.env.local，Expo 讀取 apps/mobile/.env.local，資料庫遷移命令讀取 root .env。無資料庫/儀錶板演示與真實/身份驗證帳戶分開，需要遷移Postgres。僅電話或桌面結帳需要單獨執行的 Web 後端。

[安裝工具並獲取程式碼](https://supastack.dev/zh-tw/docs/web/before-you-start.md)

[學習命令、檔案和配置](https://supastack.dev/zh-tw/docs/web/terminal-basics.md)

[完成Web首次執行教程](https://supastack.dev/zh-tw/docs/web/ship-in-5-minutes.md)

```
corepack pnpm --filter @supastack/web dev
```


## 安裝與配置

packages/ui-web 包含共享產品元件(按鈕、輸入、卡片、徽章、對話方塊、外殼部件),packages/design-tokens 是 app-theme.css 對映為 CSS 變數的令牌來源。/kit-blocks 路由掛載區塊目錄 —— 你可以帶入產品的組合區塊。

apps/mobile 消費 packages/ui-native 以獲得等價原生原語,因此端面樣式按平臺保留,而契約保持共享。

```
# Preview shared blocks and gallery
corepack pnpm --filter @supastack/web dev
# Then open http://localhost:3000/kit-blocks in your browser

# Theme tokens used by components
var(--page) var(--section) var(--raised)
var(--text) var(--muted) var(--border)
var(--accent) var(--accent-ink) var(--radius-*)
```


## 實現流程

優先用共享元件組合介面;只有當套件無法表達某個模式時才退回到自定義元素。新的共享部件屬於 ui-web,採用令牌驅動的樣式,使每個主題包自動應用。

將營銷元件(src/marketing)保持在產品端面之外,反之亦然 —— 兩套外殼系統是有意分離的。


## 驗證與排障

對每個 density/radius/font 預設以及至少一個亮色和一個暗色包驗證新元件。檢查鍵盤焦點、320px 佈局和 reduced motion;/settings/appearance 的套件畫廊是最快的檢查方式。


## 下一篇

[語言與文案](https://supastack.dev/zh-tw/docs/web/i18n.md)