Back to Details

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")
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")
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:
  1. Show the full source code
  2. List dependencies (
    npm install
    commands)
  3. Note any required peer dependencies (Radix, Motion, etc.)
  4. Highlight customization points (props, tokens, slots)
对于选中的组件：
  1. 展示完整源代码
  2. 列出依赖项（
    npm install
    命令）
  3. 标注所需的peer依赖（如Radix、Motion等）
  4. 高亮可自定义的点（属性、令牌、插槽）

Framework Compatibility

框架兼容性

Project StackSearch FilterNotes
React + TailwindDefault — best coverageMost 21st.dev components
React + CSS ModulesFilter non-TailwindFewer results
Next.js App RouterPrefer RSC-compatibleCheck "use client" directives
Vue / SvelteNot supported21st.dev is React-only
项目技术栈搜索过滤条件说明
React + Tailwind默认选项——覆盖范围最广21st.dev上的大多数组件都支持
React + CSS Modules过滤非Tailwind组件结果较少
Next.js App Router优先选择兼容RSC的组件需检查"use client"指令
Vue / Svelte不支持21st.dev仅支持React

Related Skills

相关技能

  • ork:design-to-code
    — Full mockup-to-component pipeline (uses this skill)
  • ork:design-system-tokens
    — Adapt components to project tokens
  • ork:ui-components
    — Component library patterns
  • ork:design-to-code
    —— 完整的原型转组件流水线（依赖本技能）
  • ork:design-system-tokens
    —— 让组件适配项目设计令牌
  • ork:ui-components
    —— 组件库设计模式