component-search

コンポーネント検索

21st.dev の本番環境対応 React コンポーネントのレジストリを検索します。コード、プレビュー、インストール手順を含む、関連度順の結果を返します。

component-search animated pricing table
component-search sidebar with collapsible sections
component-search dark mode toggle switch

仕組み

Query: "animated pricing table with monthly/annual toggle"
  │
  ▼
┌──────────────────────────────┐
│ 21st.dev Magic MCP           │  Search the 21st.dev developer registry
│ @21st-dev/magic              │  Filter: React, Tailwind, shadcn
└──────────┬───────────────────┘
           │
           ▼
┌──────────────────────────────┐
│ Results (ranked by relevance)│
│                              │
│ 1. PricingToggle (98% match) │  ★ 2.3K views · shadcn/ui
│ 2. PricingCards (87% match)  │  ★ 1.8K views · Radix
│ 3. AnimatedPricing (82%)     │  ★ 950 views · Motion
└──────────────────────────────┘

ステップ 0：クエリを解析

QUERY = ""  # Component description

# 1. Create main task IMMEDIATELY
TaskCreate(subject="Component search: {QUERY}", description="Search 21st.dev registry", activeForm="Searching for {QUERY}")

# 2. Create subtasks for each phase
TaskCreate(subject="Parse query and detect project context", activeForm="Detecting project context")  # id=2
TaskCreate(subject="Search component registry", activeForm="Searching registry")                      # id=3
TaskCreate(subject="Present and deliver results", activeForm="Presenting results")                    # id=4

# 3. Set dependencies for sequential phases
TaskUpdate(taskId="3", addBlockedBy=["2"])  # Search needs project context first
TaskUpdate(taskId="4", addBlockedBy=["3"])  # Results need search done

# 4. Update status as you progress
TaskUpdate(taskId="2", status="in_progress")  # When starting
TaskUpdate(taskId="2", status="completed")    # When done — repeat for each subtask

# Detect project context for framework filtering
Glob("**/package.json")
# Read to determine: React version, Tailwind, shadcn/ui, styling approach

# Detect shadcn/ui style for result ranking
Glob("**/components.json")
# Read → "style" field (e.g., "radix-luma", "base-nova")
# Used to prefer components matching the project's visual language

ステップ 1：レジストリを検索

まず閲覧し、ユーザーに選んでもらいます

理由はコストではなく、選択肢です。 検索結果には、プレビュー画像、動画、作成者、installCommand が表示されるため、人間なら適切なコンポーネントを一目で見分けるのに十分な情報が得られます。モデルにはそれができません。8 件の「コマンドパレット」の結果からユーザーの意図を推測することは、このフローで防ごうとしている失敗パターンであり、料金プランにかかわらず失敗のままです。

21st-dev-magic MCP が利用できる場合（通常の経路）：

# 1. BROWSE. Prefer search_picker: same params and results as search, but it
#    renders an inline picker so the USER chooses. Do not pre-filter to one
#    result on their behalf — show the options.
mcp__21st-dev-magic__search_picker(query="{QUERY}", type="component", limit=8)

# 2. PICK — the user selects. Stop here and wait.

# 3. RETRIEVE — the chosen component.
mcp__21st-dev-magic__get_component(id=<demo id from the chosen result>)

• 何かが存在するかどうかだけを知りたい場合や、インストールコマンドが必要な場合は、ステップ 1 で終了します。検索でその質問に答えられています。
• search は ?api_key=$API_KEY_21ST を含む installCommand を返します。これは MCP の TWENTY_FIRST_API_KEY とは別の環境変数です。npx shadcn add で認証に失敗する場合は、この変数が環境に設定されていません。

料金プラン — 推測せずに確認します

get_component だけが従量課金対象のツールです。search、search_picker、search_logo、get_theme、およびすべての一覧・メタデータツールは、どの料金プランでも無料で利用できます。

上限を推測せず、get_usage を呼び出してください。 tier と freeRetrievalsRemaining が返されます（無制限の場合はどちらも null）。

tier	get_component
free	1 日あたり 2 回 — 取得 1 回ごとにその日の利用枠を使うものとして扱います。推測での取得、ループ内での取得、「比較」のための取得は決して行わないでください
paid	無制限 — 2 つの候補を比較してもかまいませんが、選択のステップは引き続き適用されます

2026-08-16 に無料アカウントをもとに記述し、アカウントが有料になった 2026-08-17 に修正しました。元の説明は 1 日 2 回の上限を前提にフローを説明していたため、上限が撤廃された途端に古い内容に見えるようになっていました。上限は制約です。ユーザーに選んでもらうことが設計です。

21st-dev-magic が利用できない場合（代替手段）：

# Genuine fallback ONLY — scraping returns no ids, no install commands, and
# no structured metadata. If the MCP is configured, you should never be here.
WebSearch("site:21st.dev {QUERY} React component")
# Or browse the registry
WebFetch("https://21st.dev", "Search for: {QUERY}")

代替の生成経路 — v0.app MCP（2026）： レジストリに一致するコンポーネントがない場合は、WebFetch によるスクレイピングではなく、v0.app MCP サーバー経由の AI 生成に切り替えます。

# If @vercel/v0-mcp is available
# v0.app generates from the same query and can pin to shadcn style
# (e.g., luma / nova / lyra) via `shadcn apply` after download.

これは生成の経路であり、レジストリ検索ではありません。結果には閲覧数やスター数が含まれません。実績のあるコンポーネントを取得できるよう、可能な場合はレジストリ検索を優先し、レジストリに該当するものがない場合にのみ v0.app を使用してください。

ステップ 2：結果を提示

上位 3 件を、次の情報とともに表示します。

• コンポーネント名と説明
• 関連度スコア
• 人気度（閲覧数／ブックマーク数）
• フレームワークとの互換性
• プレビュー（利用可能な場合）
• インストールコマンド

AskUserQuestion(questions=[{
  "question": "Which component to use?",
  "header": "Component",
  "options": [
    {"label": "{name_1} (Recommended)", "description": "{desc_1} — {views_1} views"},
    {"label": "{name_2}", "description": "{desc_2} — {views_2} views"},
    {"label": "{name_3}", "description": "{desc_3} — {views_3} views"},
    {"label": "None — generate from scratch", "description": "Build a custom component instead"}
  ],
  "multiSelect": false
}])

ステップ 3：コンポーネントを提供

選択されたコンポーネントについて、以下を行います。

1. ソースコード全体を表示します
2. 依存関係を列挙します（npm install コマンド）
3. 必須のピア依存関係（Radix、Motion など）を記載します
4. カスタマイズできる箇所（props、tokens、slots）を示します

フレームワークとの互換性

プロジェクトのスタック	検索フィルター	備考
React + Tailwind	デフォルト — 最も広く対応	21st.dev コンポーネントの大半
React + CSS Modules	Tailwind を使用しないものに絞り込み	結果は少なめ
Next.js App Router	RSC 互換のものを優先	"use client" ディレクティブを確認
Vue / Svelte	非対応	21st.dev は React 専用です
shadcn/ui スタイル	ビジュアル言語を合わせる	Luma→角丸／ピル型、Nova→コンパクト、Lyra→シャープ

shadcn v4 のスタイル認識： components.json にスタイル（例："radix-luma"）が指定されている場合は、ビジュアル言語が一致するコンポーネントを優先します。Luma は角丸のピル型、Nova／Mira は密度の高いレイアウト、Lyra はシャープなエッジが特徴です。インストール後にコンポーネントを調整できますが、最初から近いものを選ぶことでカスタマイズの手間を減らせます。

関連スキル

• ork:design-to-code — モックアップからコンポーネントまでの完全なパイプライン（このスキルを使用）
• ork:design-system-tokens — コンポーネントをプロジェクトのトークンに適合
• ork:ui-components — コンポーネントライブラリのパターン