component-search

name	component-search
license	MIT
compatibility	Claude Code 2.1.220+. Optional: 21st-dev-magic MCP server.
description	Search 21st.dev component registry for production-ready React components. Finds components by natural language description, filters by framework and style system, returns ranked results with install instructions. Use when looking for UI components, finding alternatives to existing components, or sourcing design system building blocks.
argument-hint	[component description]
tags	["components","21st-dev","react","ui","search","registry","tailwind","shadcn"]
context	fork
background	false
version	1.1.0
author	OrchestKit
user-invocable	true
complexity	simple
persuasion-type	collaborative
effort	low
model	sonnet
allowed-tools	["Read","Glob","Grep","WebFetch","WebSearch","AskUserQuestion","TaskCreate","TaskUpdate","TaskList"]
metadata	{"category":"workflow-automation","mcp-server":"21st-dev-magic"}
triggers	{"keywords":["component search","find component","search components","ui component","react component","21st.dev"],"examples":["search for a date picker component","find a modal component for React","are there any good table components on 21st.dev"],"anti-triggers":["implement","build","design","explore","brainstorm"]}

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 switch

How 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. Update status as you progress
TaskUpdate(taskId="2", status=)  
TaskUpdate(taskId=, status=)    


Glob()



Glob()