MIXXIN Design System
全公司子系統共用的 UI 基礎。Code（tokens/ ＋ registry/）是唯一真相來源，Figma 是它的 digital twin——由 code 生成，回寫也回到 code。
架構圖
兩條流共用同一份 tokens/tokens.json：分發流把它變成下游可裝的 registry item，twin 流把它變成 Figma 裡可對照、可回寫的 digital twin。
Coverage 盤點
以下數字在 build 期從 tokens / registry / 檔案系統讀出，不是手寫的。
管線 runbook 摘要
不承諾清單
決策摘要
安裝與本地測試
在下游專案的 components.json 註冊 @mixxin registry，先裝 base 再裝元件：
npx shadcn registry add @mixxin=https://ui.mixxin.tw/r/{name}.jsonnpx shadcn add @mixxin/base本地驗證：yarn registry:build && yarn dev，把下游測試專案的 components.json 指向 http://localhost:3100/r/{name}.json，測完改回正式網址。
- MIXXIN Baseregistry:base
MIXXIN design system base: config, CSS variables and dependencies for a new project.
npx shadcn add @mixxin/base - Buttonregistry:ui
Displays a button or a component that looks like a button.
npx shadcn add @mixxin/buttonView demo → - Cardregistry:ui
Displays a card with header, content and footer slots.
npx shadcn add @mixxin/cardView demo → - Inputregistry:ui
Displays a form input field or a component that looks like an input field.
npx shadcn add @mixxin/inputView demo → - Labelregistry:ui
Renders an accessible label associated with controls.
npx shadcn add @mixxin/labelView demo → - Tableregistry:ui
以表格顯示結構化資料，含表頭、列與合計列。
npx shadcn add @mixxin/tableView demo → - Dialogregistry:ui
彈出視窗，用於聚焦單一任務或訊息。
npx shadcn add @mixxin/dialogView demo → - Alert Dialogregistry:ui
需要使用者明確確認才能關閉的警示對話框。
npx shadcn add @mixxin/alert-dialogView demo → - Selectregistry:ui
從清單中選擇單一選項的下拉選單。
npx shadcn add @mixxin/selectView demo → - Checkboxregistry:ui
可勾選的核取方塊，支援不確定狀態。
npx shadcn add @mixxin/checkboxView demo → - Radio Groupregistry:ui
一組互斥的單選按鈕。
npx shadcn add @mixxin/radio-groupView demo → - Switchregistry:ui
切換開關，用於布林值設定。
npx shadcn add @mixxin/switchView demo → - Textarearegistry:ui
多行文字輸入欄位。
npx shadcn add @mixxin/textareaView demo → - Tabsregistry:ui
以頁籤切換多組相關內容。
npx shadcn add @mixxin/tabsView demo → - Dropdown Menuregistry:ui
點擊觸發的下拉操作選單。
npx shadcn add @mixxin/dropdown-menuView demo → - Tooltipregistry:ui
滑鼠移入或聚焦時顯示的輔助說明。
npx shadcn add @mixxin/tooltipView demo → - Badgeregistry:ui
顯示狀態或計數的小型標籤。
npx shadcn add @mixxin/badgeView demo → - Separatorregistry:ui
區隔內容區塊的分隔線。
npx shadcn add @mixxin/separatorView demo → - Skeletonregistry:ui
內容載入中的骨架佔位效果。
npx shadcn add @mixxin/skeletonView demo → - Sonnerregistry:ui
顯示即時通知的 toast 元件。
npx shadcn add @mixxin/sonnerView demo → - Sidebarregistry:ui
可收合的應用程式側邊導覽列。
npx shadcn add @mixxin/sidebarView demo → - Formregistry:ui
搭配 react-hook-form 與 Field 建立表單的組合模式（base-nova 官方無獨立 Form 元件本體，改用 Controller + Field 直接組裝）。
npx shadcn add @mixxin/formView demo → - Fieldregistry:ui
表單欄位的標籤、說明與錯誤訊息容器，供 react-hook-form 組裝使用。
npx shadcn add @mixxin/fieldView demo → - Comboboxregistry:ui
可搜尋、可清除的選項選擇器。
npx shadcn add @mixxin/comboboxView demo → - Calendarregistry:ui
選擇日期或日期區間的月曆。
npx shadcn add @mixxin/calendarView demo → - Popoverregistry:ui
點擊觸發、可含互動內容的浮層。
npx shadcn add @mixxin/popoverView demo → - Paginationregistry:ui
分頁切換的頁碼導覽列。
npx shadcn add @mixxin/paginationView demo → - Breadcrumbregistry:ui
顯示目前頁面在階層中位置的麵包屑導覽。
npx shadcn add @mixxin/breadcrumbView demo → - Avatarregistry:ui
顯示使用者頭像，附文字或圖示的替代顯示。
npx shadcn add @mixxin/avatarView demo → - Alertregistry:ui
顯示重要提示或狀態訊息的區塊。
npx shadcn add @mixxin/alertView demo → - Sheetregistry:ui
從畫面邊緣滑出的側邊面板。
npx shadcn add @mixxin/sheetView demo → - Drawerregistry:ui
從畫面底部滑出的抽屜面板，適合行動裝置。
npx shadcn add @mixxin/drawerView demo → - Progressregistry:ui
顯示工作進度的長條指示器。
npx shadcn add @mixxin/progressView demo → - Scroll Arearegistry:ui
自訂捲軸樣式的可捲動容器。
npx shadcn add @mixxin/scroll-areaView demo → - Commandregistry:ui
可搜尋指令與選項的指令面板。
npx shadcn add @mixxin/commandView demo → - Input Groupregistry:ui
輸入框搭配前後綴按鈕或圖示的組合容器。
npx shadcn add @mixxin/input-groupView demo → - Use Mobileregistry:hook
偵測目前視窗寬度是否為行動裝置的 React hook。
npx shadcn add @mixxin/use-mobile - Spinnerregistry:ui
顯示載入中狀態的旋轉指示圖示。
npx shadcn add @mixxin/spinnerView demo → - Accordionregistry:ui
可展開折疊的垂直堆疊內容區塊。
npx shadcn add @mixxin/accordionView demo →