component-search

# Component Search Search 21st.dev's registry of production-ready React components. Returns ranked results with code, previews, and install instructions. ```bash component-search animated pricing table component-search sidebar with collapsible sections 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 ```python 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") ...