shadcn/ui 2026年7月アップデート: Base UI がデフォルトに、そして新しいチャットコンポーネント

shadcn/ui はデフォルトで Base UI を使用するようになりました

Base UI は新しい shadcn/ui プロジェクトのデフォルトコンポーネントライブラリとなり、初期化時の主要選択肢として Radix に取って代わります。この変更は、shadcn/create で作成されたプロジェクトが Radix より Base UI を 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 主導の移行パス

従来の codemod を提供する代わりに、shadcn/ui は「スキル」を導入し、Claude Code や Cursor といったコーディングエージェントが移行を処理できるようにしました。このアプローチは、機械的な codemod が上書きしがちなカスタムバリアント、クラス、プロップを保持することを目的としています。

移行プロセスで生成されるもの:

• 検証済みコード: 成功が報告される前に型チェックとビルドが行われたコード。
• 詳細レポート: 各コンポーネントの変更点・変更なしの項目・手動検証チェックリストを含む .migration/ ディレクトリ。
• アトミックな Git 履歴: コンポーネントごとに別ブランチ上で 1 つのコミットが作成され、ロールバックが容易になります。

新しいチャットインターフェースコンポーネント

shadcn/ui はストリーミングチャット体験向けに特化したコンポーネント群をリリースしました。会話層とインタラクションロジックに焦点を当てています。

コアチャットプリミティブ

• MessageScroller: アンカリングされたターン、ストリーミング返信、保存されたスレッドの復元、可視性トラッキングなど複雑な挙動を管理するスクロールコンテナ。新しい @shadcn/react パッケージでもスタイルなしのヘッドレスコンポーネントとして利用可能です。
• Message: アバター、配置、メッセージのグルーピングなど、会話行のレイアウトを処理します。
• Bubble: リアクション、リンク、折りたたみ可能コンテンツをサポートしたメッセージ表面を描画します。
• Attachment: メタデータとアップロード状態を伴うファイルや画像のレンダリングを管理します。
• Marker: システムノート、日付区切り、ストリーミング状態インジケータに使用されます。

チャット専用 CSS ユーティリティ

shadcn/tailwind.css に 2 つの新ユーティリティが追加されました:

• scroll-fade: コンテナにスクロール位置に応じたエッジフェードを付与し、追加コンテンツがあることを示唆します。
• shimmer: 「Thinking...」などのライブステータスインジケータ向けにテキストのシマー効果を提供します。

GitHub リポジトリをレジストリとして利用

任意の公開 GitHub リポジトリを shadcn レジストリに変換できるようになり、コンポーネントだけでなくフック、ユーティリティ、デザイントークン、CI ワークフローも配布可能です。

リポジトリのルートに registry.json を追加すると、shadcn CLI から直接アイテムをインストールできます。例として、チームがプロジェクトの規約（.editorconfig や AGENTS.md など）を配布する場合は、次のコマンドを使用します:

npx shadcn add https://github.com/acme/toolkit/project-conventions

追加のアップデートとツール

shadcn eject コマンド

shadcn パッケージへの依存を減らすため、shadcn eject コマンドは共有の shadcn/tailwind.css（data-open: などのカスタムバリアントを含む）をプロジェクトのグローバル CSS ファイルにインライン化し、パッケージ依存を削除します。

Rhea スタイル

Rhea は Luma をベースにした新しいコンパクトデザインスタイルです。間隔を小さくしコントロールをタイトにすることで情報密度を高め、Tailwind の基礎スケールは変更せずに、集中したプロダクトインターフェース向けに最適化されています。

@shadcn/react パッケージ

この新パッケージはスタイルなし・ヘッドレスの React コンポーネントを提供します。最初にリリースされたプリミティブは message-scroller で、特定のビジュアルスタイルに縛られることなく複雑なスクロール動作を実装できます。

コミュニティの視点

Base UI への移行と AI 支援によるマイグレーションへのシフトは、開発者間で議論を呼んでいます:

"codemod から LLM がマイグレーションを行う方向への転換は興味深い展開です。たとえ決定論的であっても、codemod の時代は終わりを迎えるのでしょうか。"

一部のユーザーは、これらのライブラリが "div 重視" であることに懸念を示し、<details> や <summary> といったネイティブ HTML 要素で複雑な div 構造を置き換えられると指摘しています。別のユーザーは、コピー＆ペーストアプローチと従来の UI ライブラリ（例: Mantine）とのトレードオフについて疑問を呈し、前者は単なるバージョンアップで済む更新が AI エージェントを必要とする点を問題視しています。