元件總覽
每個元件一頁，格式固定：用途 → 何時不要用 → 狀態 → 無障礙 → 活範例 → 取用。
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 日／本月