元件總覽
每個元件一頁，格式固定：用途 → 何時不要用 → 狀態 → 無障礙 → 活範例 → 取用。
Button 按鈕
觸發一個動作。
Badge 狀態徽章
標記一筆資料目前的狀態。
Callout 提示框
在畫面上就地說明一件事的狀態或原因。
Card 卡片
把相關內容包成一個可辨識的區塊。
Input 輸入框
單行文字輸入。
NumberInput 數值輸入
輸入數字。看起來只是 type="number"，但有三件小事漏了就會被罵。
Checkbox 與 Select
兩個 Radix 基礎件的薄封裝。
SegGroup 分段選擇
少量互斥選項，一眼看完、一下點完。
Chips 多選標籤片
多選，而且已選與未選同時看得見。
Tooltip 提示泡泡
補充說明，或顯示被截斷的完整內容。
Dialog 對話框
打斷使用者，要一個決定。
Table 表格基礎件
語意表格元素 ＋ 三個實用擴充。
DataTable 資料表
後台系統的主力元件。 一份欄位設定，換來搜尋、篩選、排序、分頁、合計、凍結首欄與匯出。
TabPills 分頁膠囊
同一區塊內切換不同視角。
Delta 變異顯示
顯示「和基準比差了多少」。
EmptyState 空狀態
沒有資料時，畫面該說什麼。
Stepper 步驟指示
多步驟流程走到哪了。
EditableField 唯讀逐欄編輯
預設是唯讀，點一下才變成輸入框。
ChangeSummary 變更摘要
送出前，把「我到底改了什麼」攤開來。
Coachmark 聚光導引
圈起畫面上的某個元素，旁邊說明它是什麼。
Mockup 文件示意積木
寫文件的工具，不是產品元件。
工具函式與 hook
這六項是元件的相依——你 npx shadcn add 任何一個元件時，需要的會被自動裝進
Charts 圖表
一組零相依的 SVG 圖表：不裝任何圖表庫，直接用 token 的色票畫。
Gantt 時間軸
檢視與選取用的精簡時間軸：左欄項目、右欄長條，加上刻度、格線與今天線。
GraphCanvas 節點畫布
流程圖與關聯圖的畫布：節點、連線、拖拉、縮放、minimap。
Switch、Textarea 與 RadioGroup
補齊表單的三個基本控制項。三件都沿用既有的欄位語彙：同一套邊框（--input）、
Toast 操作回饋
「你剛剛那個動作，成了沒」——只回答這一句的浮動訊息。
Skeleton 載入佔位
首次載入時，用灰塊佔住真實版面的形狀。
DateRange 期間選擇
儀表板與清單篩選的時間範圍。檔位是一等公民：今日／近 7 日／近 30 日／本月
Popover／DropdownMenu 浮層選單
錨定在觸發元素旁的兩種浮層：Popover 裝內容，DropdownMenu 裝動作。
ConfirmDialog 確認對話框
Dialog 的「破壞性動作分三級」規範，做成固定寫法的元件。
Command 指令面板
全站唯一的「用打字找東西」入口：⌘K／Ctrl+K 開啟，搜頁面、跑指令。
AppShell／Sidebar 應用外殼
後台的殼：側邊欄＋頂列＋主內容。規範的正本在
PageHeader 頁首
頁面解剖第①區的元件化。 那一頁定義了頁首區放什麼、
AppMenubar 功能選單列
多應用外殼的頂部功能選單：側欄切應用，這一條切「這個應用裡的功能」，