shadcn/uiは、コピー&ペーストで導入するUIコンポーネント集と、そのコード配布基盤（レジストリ）です。React・Next.js・Viteなど複数フレームワーク、Radix UI・Base UI・React Aria Componentsなど複数のUIプリミティブに対応したコンポーネントソースを、CLI経由でプロジェクトへ直接コピーします。apps/v4はそのドキュメントサイトであり、テーマを組み立てる「create」デザインシステムビルダーも兼ねています。
レジストリという仕組みが、テーマ・ベースカラー・フォント・アイコンライブラリ・角丸・ポインターカーソルなどの設定をJSONで表現します。apps/v4/app/(app)/(create)/init/route.tsが/initエンドポイントとして動き、parseDesignSystemConfigでクエリパラメータを検証し、buildRegistryBaseがCSS変数や依存関係を含むregistry:base形式のJSONを組み立てて返します。route.test.tsを見ると、onlyパラメータで絞り込んだ場合や不正な値を渡した場合の挙動もテストで固定されています。CLIやCreate画面のv0連携ボタンがこのJSONを取得し、コンポーネントファイルをそのままプロジェクトへ書き込みます。つまりnpmパッケージ配布ではなく、ソースコードそのものを配布する設計です。apps/v4配下には「sera」スタイルのメディアライブラリや記事一覧、分析画面などのデモと、それぞれ対応するスケルトンUIが用意されており、見た目の確認とカスタマイズ体験ができるようになっています。
- STEP 01
npx shadcn@latest initを実行すると、フレームワークの自動検出とcomponents.jsonの生成を体験できます。
- STEP 02
npx shadcn@latest add buttonを実行すると、src/components/ui配下にbutton.tsxのソースがそのままコピーされるのを確認できます。
- STEP 03
apps/v4をpnpm devで起動し、/createページでテーマ・フォント・角丸などをGUIで調整して生成コードをコピーできます。
- STEP 04
Radix UI・Base UI・React Ariaなど異なるプリミティブを切り替えて、同じコンポーネントの実装差分を比較できます。
- STEP 05
pnpm testを実行すると、route.test.tsやparse-config.test.tsなどのvitestが動き、/initエンドポイントの挙動を確認できます。
手に入るのはnpmパッケージではなく、プロジェクト内にコピーされた編集可能なコンポーネントソース一式と、components.jsonの設定ファイルです。加えてCreateビルダーを使えば、選んだテーマに対応するCSS変数一式も生成できます。
monorepoはpnpmとturborepo構成で、apps/v4単体でもNext.js・Vite・Tailwindなど依存が多く、フル動作確認には環境構築の手間があります。
createやseraのデモはv4固有の機能で、init/v0/route.tsのようなv0連携部分は外部サービスの鍵が絡み、手元だけでは完全に再現できない可能性があります。
今回確認できたのはファイルツリーと一部のソース・テストのみで、全コンポーネントの実装品質は個別に読む必要があります。
自前でUIライブラリを保守したくないものの、コード自体を所有してカスタマイズしたいReact系開発者に向いています。npmの抽象化に縛られず、Radix UIやBase UIなど土台を選びたい場面に合います。route.tsやparse-config.test.tsなど実際の検証ロジックがテスト付きで確認できるため、インストールしなくてもレジストリの設計思想と挙動は十分把握できます。