Agent skill · marketing growth · yonatangross

component-search

Searches the 21st.dev registry for production React components, ranked with install steps. Use when looking for a UI component or an alternative to one.

Why this skill is useful

Integrates with the 21st.dev component registry to provide ranked results and install instructions for React components, which the AI wouldn't generate on its own.

What it needs

Requires 21st-dev-magic installed locally. About 5k tokens when loaded. Last updated 2026-08-06. 215 stars on the source repository.

What this skill does

Component Search Search 21st.dev's registry of production-ready React components. Returns ranked results with code, previews, and install instructions. How It Works Step 0: Parse Query Step 1: Search Registry Browse first, and let the USER pick The reason is choice, not cost. Search returns a preview image, a video, the author and the installCommand — enough for a human to recognise the right component at a glance. The model cannot. Guessing which of eight "command palette" results the user meant is the failure mode this flow exists to prevent, and it stays a failure mode on every pricing tier. If 21st-dev-magic MCP is available (the real path): If the user only needs to know whether something exists, or wants the install command, stop after step 1 — search already answered it. search returns an installCommand containing ?apikey=$APIKEY21ST. That is a different env var from the MCP's TWENTYFIRSTAPIKEY; if npx shadcn add fails auth, that variable is missing from the environment. Tier — check it, do not assume it getcomponent is the only metered tool; search, searchpicker, searchlogo, gettheme and every list/metadata tool are unmetered on all tiers. Call getusage rather than assuming a cap. It returns tier plus freeRetrievalsRemaining (both null when unlimited). tier getcomponent --- --- free 2 / day — treat each retrieval as the day's budget: never speculative, never in a loop, never "to compare" paid unlimited — comparing two candidates is fine; the picker step still applies Written 2026-08-16 against a free account and corrected 2026-08-17 when the account went paid: the original text argued the flow from the 2/day cap, which made it read as obsolete the moment the cap lifted. The cap is a constraint; letting the user choose is the design. …

How to use it

Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:

@skills yonatangross/component-search

View the source on GitHub

Browse the @skills marketplace