component-search

Solid

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.

Web & Frontend 188 stars 15 forks Updated today MIT

Install

View on GitHub

Quality Score: 86/100

Stars 20%
76
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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 ``` ## 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 re...

Details

Author
yonatangross
Repository
yonatangross/orchestkit
Created
5 months ago
Last Updated
today
Language
TypeScript
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

21st-dev-builder-v2

Build websites and web apps using 21st.dev — the largest marketplace of shadcn/ui-based React Tailwind components with 1400+ components. Use when user mentions "21st.dev", "21st", "ใช้ 21st", "จาก 21st", "build with 21st", "21st component", "21st magic MCP", or references the 21st.dev component registry in any language. Covers building complete sites (landing pages, dashboards, portfolios, e-commerce storefronts, auth pages), browsing and installing individual 21st.dev components into existing projects, and setting up the 21st.dev MCP server. Also trigger when user wants premium UI components specifically from the 21st.dev registry. Do NOT trigger for general web development, standard shadcn/ui, plain Tailwind CSS, React Native, API development, testing, deployment, or any task that doesn't explicitly reference 21st or 21st.dev.

1 Updated 2 days ago
NafisRayan
Data & Documents Listed

search-first

Research before writing code for any new feature, integration, library selection, or utility — search npm / PyPI / MCP / GitHub / existing skills for solutions instead of building from scratch. Use whenever the user says 'add X functionality', 'implement Y', 'set up Z', 'integrate W', asks 'what library should I use for...', 'is there a package/client/MCP for...', proposes a specific tool while open to alternatives, or invokes the planning.md Phase 0 External Research step. Especially use when the task adds a dependency, picks between tools, or builds a utility (parser, checker, converter, linter, CI step, E2E framework, payment / auth / API client) that likely already exists. DO NOT use for: bug fixes in existing code, refactoring, config value edits, file summarization, or throwaway one-shot scripts where the approach is already fully specified by the user.

2 Updated 3 days ago
shimo4228
Web & Frontend Listed

search-before-building

Use when about to add a new helper, utility, or abstraction, a task sounds like a solved problem, a new external dependency is being considered, or custom code is proposed without checking what already exists.

7 Updated yesterday
yeaight7