design-infraReport a problem or share feedback← Catalog
21st.dev MCP (search 12k+ community components)
curatedkey21st/magic-mcp
Search the 21st.dev community marketplace (heroes, buttons, cards, AI chats, pricing…) from your agent; free search, paid code retrieval.
$
npx @21st-dev/cli@latest init --client claudeOur notes
Free tier: search + limited daily installs. Install a found item with: npx shadcn@latest add "https://21st.dev/r/<author>/<slug>?api_key=$API_KEY_21ST".- Source
- 21st.dev
- Kind
- tool
- Categories
- dev-tool
- Motion
- not tagged (static or unknown)
- Tags
- mcp, marketplace, search
- Licence
- Per author (check each component page). Free plan has a daily install limit; paid plans unlimited.
- Live demo
- 21st.dev
- Docs
- 21st.dev
Similar
Compare all 4 →- Design lab (temporary option board)oc/design-labTemporary page an agent installs in a consumer project to render candidate variants of the user's own component side by side, with their theme and content: <DesignLab title> + <LabOption id label notes chosen>. Lands at app/design-lab/page.tsx + components/design-lab.tsx; the user says which option they want, the agent applies it and removes both files.
- Agentation toolbaragentation/agentationMount <Agentation /> only in development (see skills/setup-project). Free for internal use; commercial license only if you redistribute it in a product.
- Anatomy · Isometric explainer skillanatomy/anatomy-skillMIT. Optional tier 3 skill, compatible with Claude Code and Codex. Needs Node 20.10+ and Chrome/Chromium. Existing figures install separately with pnpm add anatomy-figures. Custom models require factual and visual review; large figures may take substantial time.