TabPills 分頁膠囊
同一區塊內切換不同視角。
在 Storybook 開啟存在的唯一理由是收斂
分頁列是最容易被各畫面各自手刻 <button> 的元件。一旦散開：改一次樣式要全站找一遍，
而且 role="tablist" 語意一定會漏掉。
✅ 這樣做
所有分頁切換一律用 TabPills。
🚫 不要這樣
不要手刻 <div><button>…</button></div> 分頁列。
分頁膠囊（可帶徽章）
何時不要用
✅ 這樣做
分頁數 2–6、內容互斥、切換不改變網址主要語意。
🚫 不要這樣
分頁超過 6 個 → 那是導覽，該進側邊欄。 分頁內容需要深連結分享 → 該用路由，或至少同步到 query string。
建議同步到網址
?tab=confirmed。使用者會想把「目前這個視角」貼給同事——
分頁狀態只存在記憶體裡，等於這個連結永遠打不開他看到的畫面。
無障礙
role="tablist" ＋ 每項 role="tab" aria-selected；觸控目標套 tap-target-y。
取用
npx shadcn@latest add https://kielchang.github.io/dooping-design-book/r/tab-pills.json