Shadcn/UIがデフォルトでRadixではなくBase UIを採用

2026年7月 - Base UIがデフォルトに 本日より、Base UIがshadcn/uiのデフォルトコンポーネントライブラリとなりました。まず、少し歴史を振り返ります。shadcn/uiが2023年1月にローンチされたとき、それはRadixを基盤としていました。当時、それに匹敵するものは他にありませんでした。スタイルが適用されていないヘッドレスコンポーネント、優れたAPI、高いアクセシビリティ、そして数百万ものアプリで実証された信頼性がありました。数年が経過し、Radixを開発したのと同じチームが新しいものを開発しています。それがBase UIです。彼らは一度それを成し遂げました。今度は、その経験すべてを活かして、もう一度それをやります。昨年、Base UIはベータ版をリリースし、多くのユーザーからRadixを置き換えるのかと尋ねられました。私は「本番稼働中のアプリにとって最悪なことは、コンポーネントライブラリを切り替えることだ」と答えました。それは本心であり、今でも当てはまります。そのため、切り替えるのではなく、shadcnらしい方法を取りました。Base UI用にすべてのコンポーネントを再構築し、同じ抽象化を維持し、選択肢を提供しました。12月には両方のライブラリに対応したnpx shadcn createが登場しました。1月には完全なBase UIドキュメントが公開されました。そして、皆さんがそれを使ってどうするかを見守りました。 なぜ今か Base UIは安定しています。バージョン1.6.0で、週に600万ダウンロードを超えています。さらに良くなり続けています。チームは新しい有用なコンポーネントを定期的にリリースしています。私たちはそれを使っています。私たちが開始したすべての新しいプロジェクトはBase UIで稼働しています。皆さんも使っています。shadcn/createで作成されたプロジェクトは、Radix 2対1の割合でBase UIを選択しています。コミュニティはすでに決断を下しました。私たちはそれを公式にします。 変更点 新しいプロジェクトはデフォルトでBase UIを使用します。npx shadcn initを実行すると、Base UIがデフォルトで選択されます。shadcn/createはBase UIを最初に表示します。ドキュメントはBase UIをデフォルトとします。コンポーネントページはBase UIタブで開かれます。Radixのドキュメントはワンクリックでアクセスできます。 あなたにとっての意味 Radixは非推奨になるわけではありません。引き続きサポートし、すべてのアップデートと新しいコンポーネントは両方のライブラリに対してリリースされます（Base UIにのみ存在するコンポーネントを除く）。移行する必要はありません。Radixは成熟した、テスト済みのライブラリです。私たちは今日でも本番環境でそれを使用しており、移行する予定はありません。アプリが正常に動作しているなら、そのままリリースを続けてください。新しいプロジェクトでRadixを優先したいですか？それはフラグ一つで可能です： pnpm pmyarn bun pnpm dlx shadcn init -b radix コピー スクリプトやCIでshadcn initを非対話的に実行し、Radixを期待している場合は、-b radixを追加して同じパスを維持してください。レジストリを構築していますか？レジストリをリリースしてください： base config コピー 特定のライブラリをピン留めしたい場合。それがないアイテムは、現在Base UIとして初期化されます。何か新しいことを始めますか？Base UIをお勧めします。 移行の準備ができたとき 移行する必要はありません。しかし、もし移行したいのであれば、私たちはそれのためのスキルを構築しました： pnpm pmyarn bun pnpm dlx skills add shadcn/ui コピー それから、コーディングエージェントに尋ねてください： コピー migrate accordion to base-ui これはデフォルトで段階的です。プロジェクトをグリーンでリリース可能な状態に保ちながら、一度に一つのコンポーネントとその使用法を移行します。両方のライブラリは、作業中に共存します。途中で停止し、リリースし、翌週に戻ってきて、前回の続きから再開できます。あるいは、プロジェクト全体を一括で移行するように依頼することもできます。 なぜコッドモードではなくスキルなのか なぜなら、コードはあなたが所有しているからです。あなたはバリアントを追加し、クラスを変更し、新しいプロップをスレッド化しました。コッドモードは、あなたが触ったことのないコンポーネントを処理し、あなたが触ったコンポーネントで壊れます。そのため、私たちは知識を配布しました。すべてのリネーム、すべてのプロップ変更、すべての動作の違いは、両方のライブラリに対して手動でチェックされています。あなたのエージェントはそれを読み取り、あなたが変更したものを把握し、それらの変更を伝達します。機械的なものはどこでも修正されます（asChildはrenderになりました）。動作の変更はフラグが立てられ、サイレントにパッチされることはありません。あなたが決定します。 移行が生成するもの 実行ごとに3つのものが残ります： 動作するコード。 タイプチェックされ、ビルドされてから成功を報告します。 プロジェクトルートの.migration/にあるコンポーネントごとのレポート：変更されたもの、そのまま残されたもの、および手動で確認する必要がある項目の短いチェックリスト。 クリーンなgit履歴。 コンポーネントごとに1つのコミット、ブランチ上。ロールバックはブランチを削除することです。 レポートの例は次のとおりです： .migration/accordion.md コピー # accordion <!-- 日付、使用された戦略、および1行の判定 --> ## 変更済み <!-- 変更されたファイル、変更内容、および理由 --> ## そのまま <!-- 関連しているように見えるが、意図的に触られなかったファイル --> ## 動作の変更 <!-- コンパイルは正常に行われるが、動作が異なるもの。フラグが立てられ、パッチされない --> ## 手動で確認 <!-- 短いチェックリスト：開く、クリックする、タブで移動する。数分かかる --> 隠された状態はありません。進行状況はあなたのファイルとgit履歴に保存されるため、どのエージェント、どのセッション、どの日でも、前回停止したところから再開できます。Claude Code、Cursor、またはスキルをサポートする任意のエージェントで動作します。実際のプロジェクトでテストしました：60以上のコンポーネント、そのうち36はRadix上で動作しました。完全な移行は約25分で、コンポーネントあたり約10kトークンで実行されました。クリーンなビルド、カスタマイズはそのまま維持されました。 2026年6月 - チャットインターフェース用コンポーネント 新しいチャット 今日は、チャットインターフェースを構築するための新しいコンポーネントセットをリリースします：MessageScroller、Message、Bubble、Attachment、およびMarker。これはチャットコンポーネント作業の最初のフェーズです。私たちは一つずつ進め、各部分の背後にある抽象化を再考し、それらをコピー、構成、および製品に適応できるshadcn/uiコンポーネントとしてリリースしています。会話レイヤーから始めています：スクロール、メッセージ行、バブル、添付ファイル、およびマーカー。私たちは自問しました：優れたストリーミングチャット体験とは何か？次に、コアルールをプリミティブのセットに抽象化しました：MessageScroller。 pnpm pmyarn bun pnpm dlx shadcn@latest add message-scroller message bubble attachment marker コピー MessageScroller MessageScrollerは、会話のスクロールコンテナです。これは、間違いやすい部分を処理します：アンカーされたターン、ストリーミング応答、保存されたスレッドの復元、先行する履歴、メッセージへのジャンプ、スクロールコントロール、および可視性追跡。MessageScrollerは、メッセージ、AI状態、トランスポート、永続性、またはモデル状態を所有することなく、その動作を所有します。コンテンツレンダラーを提供するのはあなたです。MessageScrollerは、@shadcn/reactのアンスタ​​イル化されたヘッドレスコンポーネントとしても利用可能です。 Message、Bubble、Attachment、およびMarker 残りのコンポーネントは、スクローラーの周りで必要な日常的な部分をカバーします。Messageは、アバター、配置、ヘッダー、コンテンツ、フッター、およびグループ化されたメッセージを含む会話の行をレイアウトします。Bubbleは、バリアント、配置、リアクション、リンク、ボタン、および折りたたみ可能なコンテンツを備えたメッセージサーフェスをレンダリングします。Attachmentは、メディア、メタデータ、アップロード状態、アクション、およびアクションを個別にクリック可能に保つフルカードトリガーを備えたファイルと画像をレンダリングします。Markerは、ストリーミング状態、ツールアクティビティ、日付の区切りなどのステータス更新、システムノート、境界線付きの行、およびラベル付きの区切りをレンダリングします。これらは意図的に小さく作られています。AIチャット、サポート受信トレイ、チームスレッド、グループチャット、および製品固有の会話のためにそれらを組み合わせてください。 scroll-fadeとshimmer また、チャットインターフェースをより良く感じさせるための詳細として、2つの新しいCSSユーティリティを追加しました。scroll-fadeは、スクロールコンテナにスクロールを意識したエッジフェードを追加します。MessageScroller、ScrollArea、添付ファイルの行、またはオーバーレイやスクロールリスナーを追加せずに、より多くのコンテンツを示唆したい任意の長いリストに使用してください。 Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9 Item 10 Item 11 Item 12 コピー export function ScrollFadeDemo() { return ( <div className="mx-auto w-full max-w-xs overflow-hidden rounded-2xl border"> View Code </div> ) } shimmerは、ライブステータスのためのテキストシマーを追加します。「思考中…」、「応答生成中…」、ツールの実行、ストリーミングマーカーなどに使用します。 Generating response... コピー export function ShimmerDemo() { return ( <p className="shimmer text-sm text-muted-foreground">Generating response...</p> ) } 両方のユーティリティはshadcn/tailwind.cssとともに提供されるため、npx shadcn@latest initで初期化されたプロジェクトにはすでに含まれています。 @shadcn/react また、スタイルが適用されていない新しいパッケージである@shadcn/reactを作成しました。