125k

2026 年 7 月 - デフォルトとしての Base UI

新しいプロジェクトはデフォルトで Base UI を使用するようになりました。 Radix は引き続き完全にサポートされています。

本日より、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 ではなく Base UI が 2 対 1 の比率で選ばれるようになりました。

コミュニティはすでに呼びかけを行っています。正式に発表させていただいております。

何が変わったのか

  • 新しいプロジェクトのデフォルトは Base UI です。 npx shadcn init を実行すると、Base UI がデフォルトで選択されます。
  • shadcn/create は最初に Base UI を表示します。
  • ドキュメントのデフォルトは Base UI です。 コンポーネント ページは [Base UI] タブで開きます。 Radix ドキュメントはワンクリックでアクセスできます。

これはあなたにとって何を意味しますか

Radix は非推奨ではありません。 当社は引き続き Radix をサポートしており、すべての更新と新しいコンポーネントは両方のライブラリに出荷されます (コンポーネントが Base UI にのみ存在する場合を除く)。

移行する必要はありません。 Radix は成熟したテスト済みのライブラリです。現在も本番環境で実行しており、移行は行っていません。アプリが機能する場合は、出荷を続けてください。

新しいプロジェクトで Radix を使いたいですか? フラグ 1 つで完了です:

pnpm dlx shadcn init -b radix

shadcn init を非対話的に実行しており、Radix を前提とするスクリプトや CI がある場合は、-b radix を追加すればこれまでと同じ動作を維持できます。

レジストリを構築していますか? 特定のライブラリに固定したい場合は、registry:base の設定を指定してください。指定がないアイテムは、これからは Base UI として初期化されます。

新しく何かを始めますか? Base UI をお勧めします。

移行の準備ができたら

移行する必要はありません。ただし、必要に応じて、そのためのスキルを構築しました。

pnpm dlx skills add shadcn/ui

次に、コーディング エージェントに次のように尋ねます。

migrate accordion to base-ui

デフォルトでは段階的です。プロジェクトがグリーンで出荷可能な状態を維持している間に、一度に 1 つのコンポーネントとその使用法を移行します。作業中は両方のライブラリが共存します。途中で停止して出荷し、来週戻ってくると、中断したところから再開されます。または、プロジェクト全体を一度に依頼してください。

なぜコードモッドではなくスキルなのか?

コードを所有しているのはあなただからです。バリアントを追加し、クラスを変更し、新しいプロパティを配線してきたのもあなたです。コードモッドは、あなたが触れたことのないコンポーネントまで処理してしまい、逆にあなたが手を加えたコンポーネントを壊してしまいます。

そこで私たちは代わりに知識を出荷しました。すべての名前変更、すべてのプロパティの変更、すべての動作の違いを両方のライブラリに対して手作業でチェックしました。エージェントはそれを読み、あなたが何を変更したかを把握し、それらの変更を引き継ぎます。

機械的なものはどこでも修正されます (asChild は render になりました)。動作の変更にはフラグが付けられ、サイレントにパッチが適用されることはありません。あなたが決めてください。

移行によって生じるもの

実行ごとに次の 3 つのことが残ります。

  • 動作するコード。 成功を報告する前に型チェックおよびビルドが行われます。
  • プロジェクト ルートの .migration/ 内の コンポーネントごとのレポート: 何が変更され、何が放置され、手動で検証する必要があるかについての短いチェックリストが含まれます。
  • git 履歴をクリーンアップします。 ブランチ上のコンポーネントごとに 1 つのコミット。ロールバックとはブランチを削除することです。

レポートは次のようになります。

.migration/accordion.md
# accordion
 
<!-- date, strategy used, and the one-line verdict -->
 
## Changed
 
<!-- every file touched, with what changed and why -->
 
## Left alone
 
<!-- files that look related but were intentionally not touched -->
 
## Behavior changes
 
<!-- differences that compile fine but act differently. flagged, not patched -->
 
## Verify by hand
 
<!-- a short checklist: open, click, tab through. takes a minute -->

隠れた状態はありません。進行状況はファイルと git 履歴に保存されるため、どのエージェント、どのセッション、どの日でも、最後に停止したところから再開されます。

これは、Claude Code、Cursor、またはスキルをサポートする任意のエージェントで動作します。実際のプロジェクトでテストしました: 60 個以上のコンポーネント、そのうち 36 個は Radix 上にありました。完全な移行は、コンポーネントあたり約 10,000 トークンで約 25 分で実行されました。クリーンなビルド、カスタマイズはそのまま。