「デザインエンジニアのためのnpm」とも呼ばれる 21st.dev は、shadcn/uiベースのReactコンポーネント・ブロック・フックを公開・発見・インストールできるオープンソースのマーケットです。さらに、自然言語からUIを生成する Magic MCP も提供し、Cursor や Claude 系のエージェント開発と直結します。
21st.dev とは
21st.dev は、shadcn/ui の思想にならったReactコンポーネントのコミュニティ・レジストリ／マーケットです。Tailwind CSS と Radix UI をベースにした、最小・モダン・再利用可能なUI部品を npx shadcn でそのまま導入できます。フォーム・ナビ・データ可視化・複雑なウィジェットまで、定番を一から作らずに済みます。
Magic MCP：自然言語からUIを生成
21st Labs の Magic MCP は、AIによるフロントエンド開発用のMCPサーバーです。Cursor・Windsurf・Cline などのエディタから、「こういうUIが欲しい」と説明するとコンポーネント候補が複数生成され、好みのものを選んでそのまま組み込めます。Web/IDEどちらでも使え、結果はAIに指示して修正できます。
関連プロダクト
- 1code：Claude Code / Codex 等コーディングエージェントのオーケストレーション層。
- 21st SDK：アプリにAIエージェントを最速で組み込むランタイム＋Reactコンポーネント。
- Agent Elements：チャットやツール、AIワークフロー向けの本番用UIプリミティブ（shadcn風レジストリ）。
使いどころ
「自分でコードを所有しつつ、定番UIは素早く調達したい」React/Next.js開発者に最適。shadcn/ui を土台に、コンポーネント供給（21st.dev）とAI生成（Magic MCP）を足す構成は、当サイトの記事自動化のような“役割分担”の発想とも相性が良いです。
主な情報源
機能・プロダクト構成は公開時点のものです。収集・要約はAI、公開判断は人。