Radix UIはもう忘れてください：2026年ReactプロジェクトのためのBase UI移行ガイド

技術の寿命は、私たちが考えているよりも短いものです。ここ数年、Reactエコシステムを支配していたRadix UIがその象徴的な事例です。2026年現在、Radix UI Primitivesリポジトリのコミット頻度は週平均0.5回未満にまで落ち込みました。事実上のゾンビ状態です。一方で、その核心的な設計者たちがMUIチームに合流して作り上げたBase UIは、毎日25回以上のアップデートを注ぎ込んでいます。これは単なる流行ではなく、生存の問題です。

なぜBase UIが新しい標準なのか

かつて私たちはRadixの asChild パターンに熱狂しました。しかし、実務においてこのパターンは厄介な存在でした。内部的に cloneElement を使用しているため、プロップの衝突が頻発し、TypeScriptの型推論は常に不安定でした。

Base UIは、これを Render Props パターンで正面突破しました。単に構文が変わったレベルではありません。ランタイムオーバーヘッドを削減してパフォーマンスを最適化し、開発者が下位要素に渡されるプロップを100%制御できるようにします。

1. 明示的なRender Propsの勝利

Base UIでは、コンポーネントの内部状態をレンダー関数内部で即座に引数として受け取ることができます。Radixのように外部フックを不自然に繋ぎ合わせる必要はありません。

• 型安全性: ジェネリックを通じて、下位要素が受け取るべきデータを正確に推論します。
• パフォーマンス: Reactチームが推奨していない cloneElement の代わりに、直接的な関数呼び出し方式を採用しました。

2. 法的規制とSSRパフォーマンス

2026年から施行される欧州アクセシビリティ法 (EAA)とWCAG 2.2標準は、もはや選択ではなく必須です。Base UIは、サーバーサイドレンダリング環境において一貫したARIA属性を維持します。これにより、ハイドレーション過程でのレイアウトシフトを防止し、初期ロード性能 (TTI) を大幅に改善します。

実務適用：10,000個のデータを処理する戦略

エンタープライズ環境で最も苦痛な作業は、Multi-selectやComboboxの実装です。Radixはこうした高性能なウィジェットが不足していたため、常に外部ライブラリを継ぎ接ぎして対応する必要がありました。

Base UIは多重選択機能をネイティブでサポートしています。特に @tanstack/react-virtual のような仮想化ライブラリとの結合がスムーズです。大規模なデータを扱う際にその真価を発揮します。

スタイリングの宣言的管理

Base UIの Function as ClassName パターンは、Tailwind CSSと組み合わせた時に最も強力です。複雑な三項演算子の代わりに、宣言的にスタイルを管理できます。

typescript <Select.Item className={(state) =>
flex items-center px-4 py-2 rounded-lg
${state.highlighted ? 'bg-indigo-50 text-indigo-900' : 'text-slate-700'}
${state.selected ? 'font-semibold bg-indigo-100' : 'font-normal'}
${state.disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
`}

{item.label}
</Select.Item>

`

失敗しないマイグレーションロードマップ

すべてのコードを一度に書き換えるのは自殺行為です。段階的かつ戦略的なアプローチが必要です。

ステップ1：共存期
既存のRadix UIを維持したまま、npm install @base-ui-components/react を並行して導入します。

ステップ2：新規機能への優先適用
新しく追加されるモーダルや複雑なフォームに、まずBase UIを導入します。チームメンバーがRender Propsパターンに慣れるための時間を稼ぐ必要があります。

ステップ3：コアデザインシステムの入れ替え
デザインシステムの共通コンポーネントの内部実装のみをBase UIに置き換えます。外部APIインターフェースを維持すれば、他チームのコードに影響を与えずに下層アーキテクチャを近代化できます。

比較項目	Radix UI	Base UI
コアメカニズム	cloneElement プロップ注入	Render Props 関数呼び出し
プロップ制御権	低い (ライブラリ主導)	高い (開発者が直接伝達)
状態へのアクセス	外部フックが必要	レンダー関数の引数として即時注入
メンテナンス状況	事実上の停止 (2026年時点)	非常に活発 (MUIチーム主導)

持続可能なアーキテクチャを目指して

すでに shadcn/ui の最新アップデートが、Base UIを標準のプリミティブコンポーネントとして採用し始めています。市場の主導権は完全に移行しました。技術負債は放置するほど利子が膨らみます。Radix UIが提供していた革新は、今やBase UIというより完成度の高い形へと進化しました。

保守性とアクセシビリティ標準の遵守は、2026年のフロントエンド開発者における核心的な競争力です。より明確でパフォーマンス重視のツールに乗り換える時が来ました。2026年のプロジェクトは、もはや昨日の遺産に留まっていてはいけません。