125k

2026 年 5 月 - レジストリの組み込みと検証

ソース レジストリを整理して検証します。

このリリースでは、レジストリ作成者向けに 2 つの更新が追加されています。

  • 複数の registry.json ファイルから大規模なソース レジストリを構成するための include。
  • 公開前にソース レジストリをチェックするための shadcn registry validate。

これにより、1 つの大きな registry.json ファイルを手動で作成することなく、ソース レジストリと動的レジストリを簡単に保守できるようになります。

レジストリ作成者は、大規模なソース レジストリを複数の registry.json ファイルに分けて整理し、shadcn build でビルドできるようになりました。

registry.json
components
└── ui
    ├── button.tsx
    ├── input.tsx
    └── registry.json
hooks
├── registry.json
├── use-media-query.ts
└── use-toggle.ts
registry.json
{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "acme",
  "homepage": "https://acme.com",
  "include": [
    "components/ui/registry.json",
    "hooks/registry.json"
  ]
}

付属の registry.json ファイルは、合成に使用できる有効なレジストリ ファイルであり、name および homepage は省略します。レジストリのメタデータを定義する必要があるのは、ルートの registry.json だけです。

components/ui/registry.json
{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "items": [
    {
      "name": "button",
      "type": "registry:ui",
      "files": [
        {
          "path": "button.tsx",
          "type": "registry:ui"
        }
      ]
    }
  ]
}

ビルド出力

shadcn build は、含まれているレジストリを解決し、include を含まないフラット化された registry.json を書き込みます。アイテムファイルのパスはレジストリのルートを基準に保存されるため、components/ui/registry.json で宣言されたファイルは、ビルドされたレジストリ項目内では components/ui/button.tsx として書き込まれます。

レジストリを検証する

ソース レジストリを公開または提供する前に検証できるようになりました。

pnpm dlx shadcn registry validate

検証はソース レジストリ ファイルに対して直接実行されるため、先に shadcn build を実行する必要はありません。

このコマンドは、ルート registry.json、含まれるレジストリ ファイル、および項目について、スキーマ エラー、項目名の重複、インクルード ルール、ローカル項目ファイル パスをチェックします。検証では、1 回の実行で検出できるすべての対処可能なエラーが報告されます。

レジストリ ローダー

shadcn/registry パッケージは、動的レジストリ ルート向けに loadRegistry と loadRegistryItem をエクスポートします。

app/r/registry.json/route.ts
import { loadRegistry } from "shadcn/registry"
 
export async function GET() {
  const registry = await loadRegistry()
 
  return Response.json(registry)
}
app/r/[name].json/route.ts
import { loadRegistryItem } from "shadcn/registry"
 
export async function GET(
  _: Request,
  { params }: { params: Promise<{ name: string }> }
) {
  const { name } = await params
  const item = await loadRegistryItem(name)
 
  return Response.json(item)
}

詳細については、registry.json ドキュメント と スタート ガイド を参照してください。