shadcn-component-discovery

shadcn コンポーネントの検索

ユーザーがまだ設定していないレジストリも含め、shadcn エコシステム全体から既存のコンポーネントを見つけてから、カスタム実装に取りかかりましょう。

公式 shadcn スキルを補完する方法

公式の shadcn スキル（CLI v4 に同梱）は、ユーザーの components.json に宣言されているレジストリを検索します。ユーザーが使うレジストリを決めた後は、こちらが適切なツールです。

このスキルは、その上流にある課題、つまりエコシステム全体の把握を補います。ユーザーがまだ設定していないレジストリを見つけて選べるよう支援します。たとえば、アニメーション向けの Magic UI、ヒーローセクション向けの Aceternity、チャットインターフェース向けの AI Elements、音声コンポーネント向けの ElevenLabs UI などです。「どんなものがあるか」の確認にはこのスキルを使い、「これを知っているのでインストールして」という作業は公式スキルに任せましょう。

両方のスキルを使う場合は、まずこのスキルで検索し、その後、公式スキルがインストールとプロジェクトに応じた作業を引き継ぎます。

基本原則

作る前に検索しましょう。UI に関するニーズのほとんどは、shadcn エコシステムですでに解決されています。レジストリの確認にかかる10秒のコストは、すでに存在するものをカスタム実装するコストより、ほとんどの場合小さく済みます。

起動するタイミング

積極的な起動条件（コンポーネントのコードを書く前に有効化します）：

• ユーザーがテーブル、フォーム、モーダル、サイドバー、ダッシュボード、認証ページ、ランディングセクション、アニメーション、カルーセル、グラフ、または一般的な UI パターンの構築を依頼した場合
• UI を伴う機能について説明された場合（例：「ユーザーアカウント管理を追加して」→テーブル、「ユーザーが日付範囲を選べるようにして」→日付ピッカー）
• 「X のような」ものを作るとユーザーが述べ、X が一般的なパターンに当てはまる場合

明示的な起動条件（ユーザーが直接検索を依頼した場合）：

• 「コンポーネントを探して……」
• 「shadcn に……のコンポーネントはありますか？」
• 「レジストリを検索して……」
• 「……向けにどんなものがありますか？」
• 「……のカテゴリでおすすめのコンポーネントはありますか？」
• 特定のレジストリ（@animate-ui、Magic UI、Aceternity、Tailark など）への直接的な言及

ワークフロー

Step 1：ニーズを明確にする

検索する前に、以下を確認します。

• 機能：何ができる必要がありますか？（例：並べ替え、フィルタリング、ページネーションに対応したテーブル）
• スタイル：アニメーション付き、ミニマル、アクセシビリティ優先、情報密度が高い、ブルータリスト風など、どのようなスタイルですか？
• 制約：キーボード操作、ドラッグ＆ドロップ、モバイルファースト、SSR に対応する必要がありますか？

2文で確認すれば、適切でないクエリで5回検索するよりも効果的です。

Step 2：検索する

ツールの利用可否に応じて、3つの方法があります。ユーザーが shadcn プロジェクトを使っている場合は、公式 shadcn MCP の利用を強く推奨します。コード例付きで実際の検索結果を返します。

Path A：公式 shadcn MCP（推奨）

shadcn MCP サーバーが実行中の場合（npx shadcn@latest mcp init または同等の方法で設定済みの場合）、そのツールを直接使います。

1. mcp__shadcn__search_items_in_registries
   - registries: ["@shadcn", "@blocks", "@animate-ui", "@reui", "@diceui"]
   - query: "<search term>"
   - limit: 10

2. For promising results, get full details:
   mcp__shadcn__view_items_in_registries
   - items: ["@registry/component-name", "@registry/other"]

3. For implementation examples:
   mcp__shadcn__get_item_examples_from_registries
   - query: "<component>-demo"

4. For the install command:
   mcp__shadcn__get_add_command_for_items
   - items: ["@registry/chosen-component"]

MCP が検索するのは、ユーザーの components.json に設定されているレジストリのみです。ユーザーが専門的なものを探している場合は、まず関連するレジストリを components.json に追加するよう提案します。おすすめと設定例については、references/registries.md を参照してください。

Path B：shadcn CLI（MCP はないが、shadcn プロジェクトがある場合）

components.json が存在し、MCP が設定されていない場合は、CLI v3 に同梱された CLI コマンドを使います。

# Search across configured registries
npx shadcn@latest search "<term>"

# Preview a component before installing
npx shadcn@latest view @registry/component-name

# List everything available in a registry
npx shadcn@latest list @registry

エージェントとの連携を改善するため、MCP の追加を提案します：npx shadcn@latest mcp init。

Path C：プロジェクトのコンテキストがない場合

shadcn プロジェクトがまだない場合や、ユーザーが情報を集めている段階の場合：

• 説明されたニーズに基づいて、references/registries.md からレジストリをおすすめします
• ユーザーが閲覧できるよう、レジストリのウェブサイトに直接リンクします
• 方向性が決まったら、shadcn プロジェクトのセットアップ（npx shadcn@latest init）を支援すると提案します

Step 3：検索結果を提示する

状況に合わせた形式で回答します。ユーザーはこれから判断しようとしているので、読みやすく、要点をすぐ把握できる形にします。長々と説明しないでください。

積極的な確認（構築の流れの中で）

ユーザーから明示的に検索を依頼されていなくても、こちらで検索した場合：

Before building custom, I found existing options:

1. **@registry/component-name** — [one-line description]
2. **@registry/alternative** — [one-line description]

Want me to install one, or build custom?

5行以内に収めます。ユーザーの作業の流れを妨げないようにしてください。

明示的な検索（ユーザーから依頼された場合）

## Results for "<query>"

**Top matches:**

### @registry/component-name ⭐
[What it does in one sentence]
- Fits because: [specific to their need]
- Install: `npx shadcn@latest add @registry/component-name`

### @registry/alternative
[What it does in one sentence]
- Fits because: [specific to their need]
- Install: `npx shadcn@latest add @registry/alternative`

---
Install [1] or [2], see more results, view code example, or build custom?

比較（複数の優れた選択肢があり、選択が重要な場合）

実際に有力な選択肢が3つ以上あり、それぞれ異なるトレードオフがある場合は、短い表を使います。その後に、おすすめと推奨する選択肢のインストールコマンドを示します。何でも表にするのは避けてください。表は通常の文章より重くなるため、使う価値がある場合に限ります。

ステップ 4：選択を実行する

• 選んだものをインストール：add コマンドを実行し、必要に応じて props／コンポジションでカスタマイズします
• さらに表示：追加の候補を返し、ページネーションを続けます
• コードを表示：get_item_examples_from_registries またはレジストリのデモ URL から例を取得します
• カスタムで構築：そのまま進めます。ただし、コンポジションのパターン（CVA、cn()、data-slot、セマンティックトークン）を参照するため、最も近い既存コンポーネントを確認してください

検索戦略

効果的な検索語

短く具体的な名詞が最も効果的です。クエリは1～3語にしてください。

探しているもの…	検索語の例…
データ表示	table、data-grid、list
ユーザー入力	form、input、field、select、combobox
ナビゲーション	sidebar、nav、menu、tabs、breadcrumb
フィードバック	toast、sonner、alert、notification
オーバーレイ	dialog、modal、sheet、popover、drawer
メディア	carousel、gallery、image
アニメーション	animate、motion、transition
レイアウト	card、section、hero、grid、stack
日付／時刻	calendar、date-picker、date-range

レジストリの得意分野（クイック選択）

ニーズ	最初に確認するもの
コア UI プリミティブ	@shadcn
ページセクション、構築済みブロック	@blocks、Tailark、HextaUI
データグリッド、高度なテーブル	@reui
アニメーション付きコンポーネント	@animate-ui、Magic UI、Aceternity UI
AI／チャットインターフェース	AI Elements、assistant-ui
アクセシビリティ優先（React Aria）	@diceui、JollyUI、Intent UI
音声／オーディオ	ElevenLabs UI
マーケティング／ランディングページ	Tailark、Eldora UI
スタイルのバリエーション（ブルータリスト、レトロ、ガラス調）	references/registries.md を確認

URL、設定スニペット、レジストリの得意分野を含む完全なカタログについては、references/registries.md を参照してください。

回答要件

すべての検索結果の回答には、次の内容を含めてください。

1. 検索内容 — 使用したクエリ
2. おすすめ上位2～3件 — レジストリ名付きの名前、1行の説明、適している理由
3. インストールコマンド — そのままコピーして使えるもの
4. おすすめ — 明確に適しているものがある場合は、どれを選ぶべきか
5. 次のステップの選択肢 — インストール、コードを表示、さらに表示、カスタムで構築

ユーザーから求められない限り、これ以外の内容は省略してください。簡潔さがスムーズなやり取りにつながります。

例

積極的な確認

ユーザー：「ユーザーアカウントを表示する、並べ替え機能付きのテーブルを追加して」

回答：

カスタムで構築する前に、既存の選択肢を確認しました。

1. @reui/data-grid-table — 並べ替え、フィルタリング、ページネーションを備えた多機能グリッド
2. @shadcn/table — スタイルなしのプリミティブ（並べ替えには TanStack Table と組み合わせます）

@reui/data-grid-table が適していそうです。インストールしますか？

明示的な検索

ユーザー：「アニメーション付きアコーディオンを探して」

回答：

「アニメーション付きアコーディオン」の検索結果

@animate-ui/components-base-accordion ⭐

Motion をベースにした、滑らかな表示／非表示のトランジションを備えたアコーディオンです。

• 適している理由：アニメーションが組み込まれており、アクセシビリティとキーボード操作にも対応しています
• インストール：npx shadcn@latest add @animate-ui/components-base-accordion

@shadcn/accordion

Radix ベースの標準的なアコーディオンで、デフォルトではアニメーションがありません。

• 適している理由：依存関係が少なく、独自のモーションを追加できます
• インストール：npx shadcn@latest add @shadcn/accordion

---

アニメーション付き [1] をインストール、標準版 [2] をインストール、またはさらに表示しますか？

適切な候補が見つからない場合

ユーザー：「git コミットの系譜を可視化するコンポーネントを探してください」

応答：

「git commit lineage」の検索結果

shadcn エコシステムには直接一致するコンポーネントがありません。関連性が最も高い候補は次のとおりです。

• @reui/tree — ツリーの可視化（応用可能です）
• @shadcn/chart — 汎用的なグラフ作成（Recharts ベース）

これは独自に構築する必要があります。いずれかを基盤としてアプローチを概説しましょうか。それとも、@gitgraph/react のような shadcn 以外のライブラリを調べましょうか？

ベストプラクティス

推奨事項：

• コンポーネントのコードを書く前に、必ず検索します
• 10 個ではなく、2～3 個の選択肢を提示します
• それぞれが特定のニーズに適している理由を説明します
• 名前だけでなく、インストールコマンドも含めます
• 選択肢が明確な場合は推奨します

避けること：

• 「自分で作ったほうが早い」という理由で検索を省略します（通常はそうではありません）
• 検索結果の一覧をそのまま提示します。候補を絞り込んでください
• ユーザーが設定していないレジストリを、components.json の手順に触れずに提示します
• メンテナンスされていない、または放棄されたレジストリを推奨します（最新の状況は references/registries.md で確認してください）

リソース

• レジストリカタログ：references/registries.md
• shadcn 公式ドキュメント：https://ui.shadcn.com
• shadcn 公式 MCP ドキュメント：https://ui.shadcn.com/docs/mcp
• レジストリブラウザー：https://registry.directory
• コンポーネントインデックス：https://shadcnregistry.com