Zenn
🎨

本当は誰にも言いたくないけど、21st.dev というサイトが神すぎる

に公開
CSS
React
UI
animation
idea

React + Tailwind + Radix UI コンポーネントを “npm install” する感覚で扱え、さらに AI が IDE 内で 品質の高いUI を量産できるのが 21st.dev です。

本記事では実際に触ってわかった「神ポイント」を多角的にまとめました。

1. TL;DR

  • The NPM for Design Engineers ― 4,000★ 超えの OSS レジストリで高品質 UI コンポーネントを即インストールできる。
  • Magic MCP ― Cursor/Windsurf/VS Code 用 AI エージェントが自然言語だけで React コンポーネントを生成。
  • トークン課金モデル ― Free = 月 5 生成、Pro = 50 生成/月（$8）、Pro Plus = 200 生成/月（$24）。
  • 1 分で公開 & 収益化 ― npx shadcn コマンド 1 行で公開でき、プレミアム販売も可能。

普通にウェブサイトのShowcase見るだけでも参考になる実装が山ほどあります。
https://21st.dev/?tab=home

2. 21st.dev とは？

21st.dev は “Design Engineers のための NPM” を掲げる OSS ベースの UI コンポーネント・マーケットプレイスです。Tailwind CSS と Radix UI に最適化された最小構成の React コンポーネントを「探す・インストールする・売る」を一気通貫で提供します。

2.1. 主な特徴

機能 一言で
コンポーネントレジストリ 4 K+ OSS コンポーネント + プレミアム販売
npx shadcn インストール 依存関係・Tailwind 設定を自動付与
Magic MCP IDE 連携 AI がコードを自動生成
テンプレート・コレクション LP、ダッシュボードなど用途別に一括 DL
収益化 自作コンポーネントを有料販売可能

3. Magic MCP ― AI が IDE で UI を生成

MCP設定を行った上で（自分はCursor上で設定しましたが楽です）「/ui Sign‑in Form」とチャットするだけで、Magic MCP が shadcn/ui パターンに沿った TypeScript コンポーネントをプロジェクトに直接書き込みます。対応 IDE は Cursor、Windsurf、VS Code。生成されたコードは自由に改変・商用利用 OK。

How it works

  1. IDE で /ui コマンド＋要件を入力
  2. Magic が 21st.dev ライブラリを参考にコード生成
  3. クリック 1 つでファイルを追加 & 即プレビュー

3.1. 使ってみた所感

  • テンプレ & スタイルが揃っているので “動くモック” が秒で完成
  • 既存コンポーネントへのアニメ追加（Enhance Existing UI）は現在 β（Soon と表示）。
  • SVGL 連携でブランドロゴも即取得できるのが地味に便利。

4. npxで一撃インストール体験

# 公式 Accordion コンポーネントを追加
npx shadcn@latest add "https://21st.dev/r/shadcn/accordion"

この 1 行で下記が完了します：

  • 必要な .tsx / tailwind.config.js / globals.css の生成
  • Radix UI 依存の自動解決
  • Tailwind の color 変数拡張まで自動反映

5. 21st.dev が刺さる 5 つの理由

  1. 爆速プロトタイピング ― npm & AI の二段ロケットで UI 構築時間を数時間→数分に短縮。
  2. 品質の担保 ― 投稿後に “on_review → posted → featured” の 3 段階審査。アクセシビリティやダークモード対応も必須。
  3. TypeScript First ― 99 % TypeScript、型安全で安心。
  4. コミュニティ駆動 ― Discord & GitHub でのフィードバックループが活発。スター数 4 k+ が物語る勢い。
  5. 収益化の容易さ ― Premium Store で自作 UI を課金販売も可能。トークン制なのでマネタイズ導線がシンプル。

6. 価格 & トークンシステムまとめ

  • Free … 月 5 トークン（生成 / Premium 購入共通）
  • Pro $8 … 50 トークン／月、Premium コンポーネント $0.80／個
  • Pro Plus $24 … 200 トークン／月、Premium $0.60／個
    トークンは Magic 生成 と 有料コンポーネント購入 両方で消費します。足りなくなったら都度チャージも可。

7. 気になるポイント

  • React 専用 ― Vue/Svelte は現状サポート外
  • SSR 未対応 ― Next.js Server Component 対応は「coming soon」
  • Token 経済依存 ― 無制限プランが無いのでヘビーユース時のコストは要試算
  • 品質審査のボトルネック ― 審査は創設者 Serafim 氏が手動で実施しているためフィーチャー反映までタイムラグがある場合も。

まとめ

UI 開発の「探す・作る・整える・共有する」を 1 つのプラットフォームに統合した 21st.dev は、まさに フロントエンド版 GitHub + npm + Copilot。
個人開発でもプロダクションでも “デザインエンジニアリング” を加速させる強力な武器になるので、興味がある人はぜひ触ってみてください。

最後に一言
あなたの UI 生産性は確実にバグります。

Discussion