21st.dev とは何か
21st.dev は、shadcn/ui ベースの React コンポーネントを公開・発見・インストールできるオープンソースのコミュニティマーケットプレイスだ。「デザインエンジニアのための npm」を標榜し、Y Combinator のバッキングを受けている。
開発者は自作の UI コンポーネントを 1 分で公開でき、利用者は npx shadcn コマンド一発でプロジェクトに取り込める。GitHub リポジトリ（serafimcloud/21st）はオープンソースで、コミュニティ主導の成長を続けている。
なぜ今 21st.dev が注目されるのか
shadcn/ui は React + Tailwind CSS の UI コンポーネントライブラリとして爆発的に普及した。しかし公式が提供するコンポーネントは基本的なものに限られ、実際のプロダクト開発では Hero セクション、Pricing テーブル、Testimonial カードなど、より高レベルな「ブロック」が必要になる。
21st.dev はこのギャップを埋める。コミュニティが作った高品質なブロックを、shadcn/ui と同じ DX（Developer Experience）で利用できる点が最大の価値だ。
主な機能
コンポーネントマーケットプレイス
カテゴリは豊富で、Hero、Features、Pricing、Buttons、Testimonials、AI Chat Components、Shaders、CTA など多岐にわたる。各コンポーネントにはライブプレビュー、コード、インストール手順が揃っている。
AI コンポーネント生成（Magic Chat / 1Code）
プロンプトを入力するだけで UI コンポーネントの候補を複数生成する AI 機能を搭載。IDE（VS Code、Cursor、Windsurf）との連携も可能で、MCP（Magic Component Platform）として開発フローに組み込める。
品質管理の仕組み
コンポーネントは公開後、3 段階のステータスで管理される：
| ステータス | 説明 |
|---|---|
| on_review | 公開直後。直リンクでアクセス可能、レビュー待ち |
| posted | レビュー通過。プロフィールページに表示 |
| featured | ホームページ・公開一覧に掲載 |
創業者の Serafim 氏が全コンポーネントを個人レビューしており、featured に上がるには視覚品質・コード構造・テーマ対応の基準を満たす必要がある。
技術仕様
- 対応: React、Next.js（クライアントコンポーネント）、TypeScript
- スタイリング: Tailwind CSS + CSS 変数（shadcn テーマシステム）
- UI基盤: Radix UI（アクセシブル・ヘッドレス）
- ライト/ダーク: 両モード対応必須
- 依存関係: npm パッケージ、内部コンポーネント参照に対応
- デモ: 複数デモ + プレビュー画像 + 動画サポート
21st.dev vs 競合サービス比較
| 観点 | 21st.dev | v0.dev（Vercel） | shadcn/ui 公式 | Tailwind UI |
|---|---|---|---|---|
| コンセプト | コミュニティ型マーケットプレイス | AI が UI を生成 | 公式コンポーネント集 | 有料テンプレート集 |
| コンポーネント数 | 数千（コミュニティ投稿） | AI 生成で無限 | 約50種の基本部品 | 500+ テンプレート |
| AI 機能 | Magic Chat / 1Code | コア機能（プロンプト→UI） | なし | なし |
| 価格 | 無料（オープンソース） | フリーミアム | 無料 | $299 買い切り |
| カスタマイズ性 | 高（ソースコピー方式） | 中（生成結果を編集） | 高（ソースコピー方式） | 高（ソースコピー方式） |
| 品質保証 | 手動レビュー + Featured 制度 | AI 品質に依存 | 公式メンテナンス | プロチーム管理 |
| 投稿・共有 | 誰でも公開可能 | 共有リンクのみ | コントリビュート制限あり | 不可 |
| 技術スタック | React + Tailwind + Radix | React + Tailwind | React + Tailwind + Radix | HTML/React + Tailwind |
個人開発者にとっての実用価値
1. UI 構築の時短
shadcn/ui を使っているなら、21st.dev のコンポーネントはそのままプロジェクトに溶け込む。Hero セクションや Pricing ページをゼロから作る時間を大幅に短縮できる。
2. デザイン品質の底上げ
「Figma のモーション版」と評される Jitter のように、デザインセンスに自信がなくても、Featured コンポーネントを使えばプロ品質の UI が手に入る。個人開発でデザイナーを雇えない場面で特に有効だ。
3. ポートフォリオとしての公開
自作コンポーネントを公開すれば、GitHub プロフィール以上に「動くデモ付き」のポートフォリオになる。デザインエンジニアとしてのブランディングに活用できる。
4. AI との組み合わせ
Cursor や Windsurf などの AI エディタと MCP 連携すれば、「こういう UI が欲しい」→ AI が 21st.dev のコンポーネントを提案 → ワンコマンドでインストール、という流れが実現する。
注意点・限界
- React 限定: Vue、Svelte、Angular ユーザーは対象外
- shadcn/ui 前提: Tailwind + Radix UI のエコシステムに依存。MUI や Chakra UI との互換性はない
- 品質のばらつき: Featured 以外のコンポーネントは品質が保証されない
- サーバーコンポーネント未対応: 現時点では Next.js のクライアントコンポーネントのみ
- 収益化モデルが未確立: Y Combinator 支援があるが、長期的な持続性は不透明
まとめ：shadcn/ui ユーザーなら一度は覗くべき
21st.dev は「shadcn/ui の App Store」とも言える存在だ。React + Tailwind で開発している個人開発者にとって、UI 構築の効率を一段上げてくれるリソースになり得る。
特に、ランディングページや SaaS の管理画面を短期間で仕上げたい場面では、Featured コンポーネントを起点にカスタマイズする戦略が有効だ。AI 機能との組み合わせで、さらに開発速度を加速できる可能性がある。
次のアクション:
- 21st.dev の Featured ページを覗いて、自分のプロジェクトに使えるコンポーネントがないか確認する
- shadcn/ui を未導入なら、まず公式サイトで基本を押さえる
- AI エディタ（Cursor 等）を使っているなら、MCP 連携を試してみる
編集部コメント
AI Solo Craft 編集部のエキスパートが、専門視点で読み解きます。
「デザインエンジニアのための npm」というポジショニングが的確。個人開発者がデザイナーなしで LP を作る場面で、Featured コンポーネントは確実にベースラインを引き上げてくれる。気になるのは、似たようなデザインのコンポーネントが増えて「21st.dev っぽい UI」が量産される可能性。自分のブランドに合わせたカスタマイズは怠らないで。
YC バッキングで成長軌道に乗っているが、収益モデルが見えにくい。現状は無料だが、将来的にはプレミアムコンポーネントの課金や、企業向けプライベートレジストリの提供が考えられる。個人開発者としては「今のうちに無料で使い倒す」戦略で問題ないが、ロックインリスクは低い（ソースコピー方式なので、サービスが終了してもコードは残る）。
21st.dev のポイントは「shadcn/ui エコシステムの中で、コミュニティが品質の底上げを担う」という構造にある。v0.dev が「AI で生成」、Tailwind UI が「プロが販売」なのに対し、21st.dev は「コミュニティが共有し、レビューで品質を担保する」モデル。React + Tailwind を使う個人開発者なら、まず Featured を眺めて自分のプロジェクトに合うものがないか探してみよう。
shadcn/ui の「ソースをコピーして自分のものにする」という設計思想を、コミュニティ規模に拡張した点が秀逸。ただし依存関係の管理には注意が必要で、Featured でないコンポーネントを本番に入れる場合はコードレビュー必須。MCP 連携は Cursor ユーザーなら試す価値あり。サーバーコンポーネント対応が来れば、Next.js App Router との相性がさらに上がるはず。