component-search

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Component Search

组件搜索

Search 21st.dev's registry of production-ready React components. Returns ranked results with code, previews, and install instructions.

bash

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

搜索21st.dev的可用于生产环境的React组件注册表，返回包含代码、预览和安装说明的排名结果。

bash

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

How It Works

工作原理

Query: "animated pricing table with monthly/annual toggle"
  │
  ▼
┌──────────────────────────────┐
│ 21st.dev Magic MCP           │  Search 1.4M+ 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
└──────────────────────────────┘

Query: "animated pricing table with monthly/annual toggle"
  │
  ▼
┌──────────────────────────────┐
│ 21st.dev Magic MCP           │  搜索140万+开发者组件库
│ @21st-dev/magic              │  过滤条件：React, Tailwind, shadcn
└──────────┬───────────────────┘
           │
           ▼
┌──────────────────────────────┐
│ 结果（按相关性排名）          │
│                              │
│ 1. PricingToggle（匹配度98%） │  ★ 2.3K次浏览 · shadcn/ui
│ 2. PricingCards（匹配度87%）  │  ★ 1.8K次浏览 · Radix
│ 3. AnimatedPricing（匹配度82%）│  ★ 950次浏览 · Motion
└──────────────────────────────┘

Step 0: Parse Query

步骤0：解析查询

python

QUERY = ""  # Component description

TaskCreate(subject="Component search: {QUERY}", description="Search 21st.dev registry")

python

QUERY = ""  # 组件描述

TaskCreate(subject="Component search: {QUERY}", description="Search 21st.dev registry")

Detect project context for framework filtering

检测项目上下文以进行框架过滤

Glob("**/package.json")

Read to determine: React version, Tailwind, shadcn/ui, styling approach

读取文件以确定：React版本、Tailwind、shadcn/ui、样式方案

undefined

undefined

Step 1: Search Registry

步骤1：搜索组件库

If 21st-dev-magic MCP is available:

python

undefined

如果21st-dev-magic MCP可用：

python

undefined

Use MCP tools to search the 21st.dev component registry

使用MCP工具搜索21st.dev组件注册表

Pass the natural language query

传入自然语言查询

The MCP handles semantic search and ranking

MCP会处理语义搜索和排名


**If 21st-dev-magic is NOT available (fallback):**
```python


**如果21st-dev-magic不可用（备选方案）：**
```python

Fallback to web search

备选方案：使用网页搜索

WebSearch("site:21st.dev {QUERY} React component")

Or browse the registry

或者浏览组件库

WebFetch("https://21st.dev", "Search for: {QUERY}")

undefined

WebFetch("https://21st.dev", "Search for: {QUERY}")

undefined

Step 2: Present Results

步骤2：展示结果

Show top 3 matches with:

Component name and description
Match relevance score
Popularity (views/bookmarks)
Framework compatibility
Preview (if available)
Install command

python

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个匹配结果，包含：

组件名称和描述
匹配相关性得分
流行度（浏览量/收藏量）
框架兼容性
预览（如有）
安装命令

python

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
}])

Step 3: Deliver Component

步骤3：交付组件

For the selected component:

Show the full source code
List dependencies (
```
npm install
```
commands)
Note any required peer dependencies (Radix, Motion, etc.)
Highlight customization points (props, tokens, slots)

对于选中的组件：

展示完整源代码
列出依赖项（
```
npm install
```
命令）
标注所需的peer依赖（如Radix、Motion等）
高亮可自定义的点（属性、令牌、插槽）

Framework Compatibility

框架兼容性

Project Stack	Search Filter	Notes
React + Tailwind	Default — best coverage	Most 21st.dev components
React + CSS Modules	Filter non-Tailwind	Fewer results
Next.js App Router	Prefer RSC-compatible	Check "use client" directives
Vue / Svelte	Not supported	21st.dev is React-only

项目技术栈	搜索过滤条件	说明
React + Tailwind	默认选项——覆盖范围最广	21st.dev上的大多数组件都支持
React + CSS Modules	过滤非Tailwind组件	结果较少
Next.js App Router	优先选择兼容RSC的组件	需检查"use client"指令
Vue / Svelte	不支持	21st.dev仅支持React

component-search

Original

Translation

Component Search

组件搜索

How It Works

工作原理

Step 0: Parse Query

步骤0：解析查询

Detect project context for framework filtering

检测项目上下文以进行框架过滤

Read to determine: React version, Tailwind, shadcn/ui, styling approach

读取文件以确定：React版本、Tailwind、shadcn/ui、样式方案

Step 1: Search Registry

步骤1：搜索组件库

Use MCP tools to search the 21st.dev component registry

使用MCP工具搜索21st.dev组件注册表

Pass the natural language query

传入自然语言查询

The MCP handles semantic search and ranking

MCP会处理语义搜索和排名

Fallback to web search

备选方案：使用网页搜索

Or browse the registry

或者浏览组件库

Step 2: Present Results

步骤2：展示结果

Step 3: Deliver Component

步骤3：交付组件

Framework Compatibility

框架兼容性

Related Skills

相关技能