Component Search
Search 21st.dev's registry of production-ready React components. Returns ranked results with code, previews, and install instructions.
/ork:component-search animated pricing table
/ork:component-search sidebar with collapsible sections
/ork:component-search dark mode toggle switchHow It Works
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
└──────────────────────────────┘Step 0: Parse Query
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. Before starting each task, verify it's unblocked
task = TaskGet(taskId="2") # Verify blockedBy is empty
# 5. 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 languageStep 1: Search Registry
If 21st-dev-magic MCP is available:
# Use MCP tools to search the 21st.dev component registry
# Pass the natural language query
# The MCP handles semantic search and rankingIf 21st-dev-magic is NOT available (fallback):
# Fallback to web search
WebSearch("site:21st.dev {QUERY} React component")
# Or browse the registry
WebFetch("https://21st.dev", "Search for: {QUERY}")Alternative generation path — v0.app MCP (2026): When the registry doesn't have a matching component, fall back to AI generation via the v0.app MCP server rather than WebFetch scraping:
# 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.This is a generation path, not a registry search — results will not have view counts or stars. Prefer registry search when possible so you get battle-tested components; use v0.app only when the registry misses.
Step 2: Present Results
Show top 3 matches with:
- Component name and description
- Match relevance score
- Popularity (views/bookmarks)
- Framework compatibility
- Preview (if available)
- Install command
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
For the selected component:
- Show the full source code
- List dependencies (
npm installcommands) - Note any required peer dependencies (Radix, Motion, etc.)
- Highlight customization points (props, tokens, slots)
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 |
| shadcn/ui style | Match visual language | Luma→rounded/pill, Nova→compact, Lyra→sharp |
shadcn v4 style awareness: When components.json has a style (e.g., "radix-luma"), prefer components whose visual language matches — rounded pill shapes for Luma, dense layouts for Nova/Mira, sharp edges for Lyra. Components can be adapted post-install, but a closer match reduces customization work.
Related Skills
ork:design-to-code— Full mockup-to-component pipeline (uses this skill)ork:design-system-tokens— Adapt components to project tokensork:ui-components— Component library patterns