レジストリとは？

2025年01月10日

・

2025年01月10日

レジストリは、shadcn/registry の仕組みを使って設計された、再利用可能なコンポーネントやライブラリの配布システムです。

プラグインとの違い

従来の npm パッケージやプラグインとは異なり、レジストリはコードそのものをプロジェクトに移植します。

プラグイン方式の場合

node_modules/
  └── some-package/  ← ブラックボックス
      └── component.js  ← 編集できない

レジストリ方式の場合

components/
  └── image-cropper.tsx  ← あなたのコード
lib/
  └── utils.ts  ← 自由にカスタマイズ可能

つまり、インストールされたコンポーネントはあなたのプロジェクトの一部となり、フルカスタマイズが可能です。必要に応じて自由に編集、拡張、削除できます。

shadcn/ui との統一感

このレジストリのすべてのコンポーネントは、shadcn/ui のテーマシステムをベースに構築されています。

統一されたデザイントークン

/* すべてのコンポーネントが同じ変数を使用 */
background: hsl(var(--background));
color: hsl(var(--foreground));
border: hsl(var(--border));

これにより：

ダークモード/ライトモードの自動対応
既存の shadcn/ui コンポーネントとの自然な調和
プロジェクト全体で統一されたデザイン言語

レジストリの特徴

1. 簡単なインストール

shadcn CLI を使って、1コマンドでコンポーネントをプロジェクトに追加できます。

pnpm dlx shadcn@latest add

2. 依存関係の自動解決

コンポーネントに必要な：

関連ファイル
npm パッケージ
依存する他のコンポーネント

これらがすべて自動的に検出され、一緒にインストールされます。

3. TypeScript 完全対応

すべてのコンポーネントは TypeScript で書かれており、型安全性が保証されています。

レジストリの種類

Blocks（ブロック）

完成された UI パターンやセクション。すぐに使えるコンポーネントの組み合わせです。

Image Cropper - 画像のトリミング機能
Codes - コード表示コンポーネント
その他多数

Libraries（ライブラリ）

ユーティリティ関数やヘルパー関数。UI に直接関係しないコードです。

Base URL - ベース URL の取得
その他のユーティリティ

使い方

レジストリからコンポーネントを選択
インストールコマンドをコピー
プロジェクトで実行
必要に応じてカスタマイズ

コンポーネントはあなたのコードベースに追加されるので、プロジェクトの要件に合わせて自由に変更できます。

MCP との連携

MCP（Model Context Protocol）を設定することで、AI エージェントがレジストリのコンポーネントを自動的に利用できるようになります。

詳しくは MCP のページをご覧ください。

Command Palette