shadcn/ui 2026 年 7 月更新：Base UI 預設化與全新聊天組件

shadcn/ui 現在預設使用 Base UI

Base UI 現在是新 shadcn/ui 專案的預設組件庫，在初始化期間取代了 Radix 成為首選。這次轉變是在社群採用一段時間後的結果，透過 shadcn/create 建立的專案中，選擇 Base UI 而非 Radix 的比例達到了 2 比 1。

使用者關鍵變更

• 初始化： 執行 npx shadcn init 現在會預設選擇 Base UI。
• 文件： 組件頁面現在預設顯示 Base UI 分頁，不過仍可透過一鍵點擊切換至 Radix 文件。
• CLI 預設值： shadcn/create 現在將 Base UI 作為第一個選項呈現。

對 Radix 的支援

Radix 並未被棄用。shadcn/ui 持續支援 Radix，且除非組件是 Base UI 專屬，否則新組件將同時為兩個庫提供版本。對於現有使用 Radix 的生產環境應用程式，建議無需進行遷移。對於新專案偏好使用 Radix 的使用者，可以在 shadcn init 期間使用 -b radix 旗標來維持先前的預設值。

AI 驅動的遷移路徑

shadcn/ui 並非提供傳統的 codemod，而是為編碼代理（例如 Claude Code 或 Cursor）引入了一種「技能」（skill）來處理遷移。這種方法旨在保留自定義變體、類別和屬性，而機械式的 codemod 通常會覆蓋這些內容。

遷移過程會產生：

• 已驗證的程式碼： 在回報成功之前，會先進行型別檢查與建置。
• 詳細報告： 一個 .migration/ 目錄，其中包含每個組件的報告，詳細說明了哪些內容發生了變更、哪些內容保持不變，以及一份手動驗證清單。
• 原子化 Git 歷史紀錄： 在獨立的分支上為每個組件進行一次提交，以便於回滾。

全新聊天介面組件

shadcn/ui 發布了一套專為串流聊天體驗設計的組件，重點放在對話層與互動邏輯。

核心聊天原語 (Primitives)

• MessageScroller: 一個捲動容器，負責管理複雜行為，包括錨點回合、串流回覆、已儲存的執行緒恢復以及可見性追蹤。這也可以作為無樣式的 headless 組件，在新的 @shadcn/react 套件中取得。
• Message: 處理對話列的佈局，包括頭像、對齊方式以及群組訊息。
• Bubble: 渲染訊息表面，支援反應（reactions）、連結與可摺疊內容。
• Attachment: 管理檔案與圖片的渲染，並包含中繼資料與上傳狀態。
• Marker: 用於系統筆記、日期分隔線與串流狀態指示器。

聊天專用 CSS 工具類

兩個新的工具類已新增至 shadcn/tailwind.css：

• scroll-fade: 為容器增加感知捲動的邊緣淡入淡出效果，以提示還有額下方的內容。
• shimmer: 為即時狀態指示器（例如「Thinking...」）提供文字閃爍效果。

GitHub 儲存庫作為註冊表 (Registries)

任何公開的 GitHub 儲存庫現在都可以轉換為 shadcn 註冊表，讓開發者不僅能分發組件，還能分發 hooks、工具類、設計標記 (design tokens) 與 CI 工作流。

透過在儲存庫根目錄新增一個 registry.json 檔案，使用者可以直接透過 shadcn CLI 安裝項目。例如，一個團隊可以透過指令 npx shadcn add https://github.com/acme/toolkit/project-conventions 來分發專案規範（例如 .editorconfig 或 AGENTS.md）。

其他更新與工具

shadcn eject 指令

為了減少對 shadcn 套件的依賴，shadcn eject 指令會將共享的 shadcn/tailwind.css（其中包含自定義變體如 data-open:）直接內聯到專案的全域 CSS 檔案中，並移除該套件依賴。

Rhea 風格

Rhea 是一種基於 Luma 的全新、緊湊型設計風格。它提供更高的資訊密度，具有較小的間距與更嚴密的控制，專為專注的產品介面設計，且不會改變底層的 Tailwind 間距比例。

@shadcn/react 套件

這個新套件提供無樣式的 headless React 組件。第一個發布的 primitive 是 message-scroller，讓開發者可以實作複雜的捲動行為，而不必受限於特定的視覺風格。

社群觀點

從 Base UI 轉向與 AI 輔助遷移的趨勢，引發了開發者之間的討論：

「從 codemod 轉向讓 LLM 執行遷移工作是一個有趣的發展。即使它們比 codemod 更具決定性，我還是好奇 codemod 的時代是否已進入倒數計時。」

部分使用者對這些庫的「div-heavy」特性表示擔憂，指出原生 HTML 元素如 <details> 和 <summary> 通常可以取代複雜的 div 結構。其他人則質疑「複製貼上」模式與傳統 UI 庫（如 Mantine）之間的權衡，指出前者需要 AI 代理來進行更新，而後者只需簡單的版本升級即可完成。