shadcn/ui、Base UIをデフォルトコンポーネント標準に

TL;DR: shadcn/uiはBase UI 1.6.0をデフォルトコンポーネント標準として採用。新規プロジェクトはBase UIが選択される。チャット機能向けの新コンポーネント群とRhea デザイン標準も発表。

shadcn/ui チームは、Base UIをshadcn/uiの新しいデフォルトコンポーネント標準として採用することを発表した。これまでRadixをベースとして January 2023 に構築されてきたが、Base UIへの移行が実現した。Base UIは1.6.0版時点で6M+の週間ダウンロード数を記録。npx shadcn initコマンドで新規プロジェクトを作成する際、デフォルトではBase UIが選択されるようになる。

Base UIへの標準化

Base UIの採用拡大は、コミュニティの利用パターンからも明らかである。shadcn/createで作成されたプロジェクトではBase UIがRadixに対して2対1の割合で選択されており、ユーザー側の実質的な選択がすでに動いていた。デフォルト設定をこれに合わせる形となった。Radixは今後も更新を継続して受け取り、廃止されない。

ドキュメントもBase UIを標準として表示し、Radixのドキュメントは1クリック離れた場所からアクセス可能に変更された。

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

新たにリリースされたコンポーネント群はチャット機能の実装向けである。MessageScroller、Message、Bubble、Attachment、Markerの5つが発表された。MessageScrollerはメッセージスレッドのスクロールコンテナとしての役割を担う。

「MessageScroller owns that behavior without owning your messages, AI state, transport, persistence, or model state. You bring the content renderer.」

MessageScrollerはアンカー付きターン、ストリーム応答、保存スレッドの復元、先頭への履歴追加、メッセージへのジャンプ、スクロール制御、可視性追跡といった実装が難しい動作を処理する。同時に、メッセージ管理やAI状態、データ永続化はユーザー側で実装する設計である。

また、@shadcn/reactパッケージが新たに作成され、スタイルなしのヘッドレスReactコンポーネントが提供される。MessageScrollerはこのパッケージでもヘッドレスコンポーネントとして利用可能である。

新型デザイス標準「Rhea」と開発ツール強化

Rheaは新しいshadcn/uiのデザイン標準として導入された。

「Luma, but more compact」

基本となる丸みを持つ設計はLumaを踏襲しながら、より空間効率的な設計になっている。スペースが限定的な製品インターフェースへの対応を意識した変更である。Rheaはshadcn/createで、RadixおよびBase UI双方での利用が可能である。

開発ツールの強化として、GitHubレジストリが導入された。公開GitHubリポジトリを直接レジストリとして利用でき、shadcn buildコマンドの実行を不要とする設計である。加えて、shadcn ejectコマンドはshadcn/tailwind.cssをグローバルCSSファイルに組み込み、インライン化する。

shadcn/uiチームは「the worst thing you can do for your production app is switch component libraries」とコンポーネント標準の変更がもたらすリスクについて言及。今回の移行では60以上のコンポーネントを含む検証が行われ、Radixコンポーネント36個について全体で25分の移行時間にとどまった。

筆者の見立て

• Base UIは本番環境対応で安定性が確保されたと解釈している
• コミュニティがBase UIをRadixに対して2対1の割合で選択していた状況から、ユーザー側の実質的な標準化がすでに進んでいたと解釈している

この記事は元記事の事実のみに基づいて自動生成されました。

出典

shadcn, "Changelog", https://ui.shadcn.com/docs/changelog (AI Elements の報道による)