21st-cli-use

21st CLI — ターミナルから検索、インストール、生成

21st CLI（npx @21st-dev/cli、実行ファイル 21st）は、21st.dev カタログ用のコマンドラインインターフェースです。まず検索し、目的に合うものをインストールして、合致するものがない場合にのみ UI を手書きしてください。独自のコンポーネント／テーマ／テンプレートを公開するには、21st-registry スキルを使用してください。プロジェクトのデザインをテーマとして公開するには、21st-design-sync を使用してください。

認証（最初に一度だけ実行）

どちらも同じ API キーとして送信される、相互に置き換え可能な 2 種類の認証情報があります。

1. ログインセッション — npx @21st-dev/cli login を実行するとブラウザーが開き、トークンが ~/.config/21st/auth.json に保存されます。対話操作を行う開発マシンに最適です。
2. API キー — **https://21st.dev/mcp**（または **https://21st.dev/settings/api-keys**）から取得した 21st_sk_…。--api-key <key> または TWENTYFIRST_TOKEN／API_KEY_21ST 環境変数で渡します。CI に最適です。

21st whoami ではサインイン中のアカウントが表示されます。21st usage では取得のティア／クォータと 21st AI generation のステータスが表示されますが、AI クレジットの残高は表示されません。構造化されたステータスを確認するには、MCP の get_usage.aiGenerationEnabled または CLI 1.17.1 以降の 21st usage --json を使用してください。ステータスがない場合や不明な場合に、AI へのアクセスが許可されることはありません。21st logout を実行すると、保存済みのログイン情報が消去されます。

使用量の計測

メタデータ（検索、プレビュー、テーマの CSS）は無料です。コンポーネントのコードの取得（21st get、インストール）には 1 日あたりの無料クォータがあり、Builder では無制限に取得できます。ホスト型 21st AI の利用には別途 AI へのアクセス権が必要で、AI クレジットを消費します。基本の Builder では AI は無効です。生成方法を選ぶ前に 21st usage を確認してください。AI が明示的に有効になっていない場合は、検索してコードを取得し、独自のコーディングエージェントで調整してください。AI へのアクセスを有効にするまでは、ai_subscription_required によって拒否された生成を再試行しないでください。

---

検索

# Search everything (components + themes + templates)
21st search "pricing table" --limit 10
21st search button --type c        # components only (c | theme | template)
21st search dark --type theme
# Filters: --tag <slug> --color <bucket> --sort <s> --free|--paid
#          --author <username> --mine --liked   --json for machine output

コンポーネントを手書きする前に、必ず検索してください — 一致するものがあれば、ゼロから作成するよりもインストールして調整するほうが通常は速く済みます。

ロゴ

21st logo discord            # search brand + UI SVG logos (free, no login)
21st logo "next js" --limit 5 --json

各ロゴの名前と SVG の URL を表示するので、curl でそのままプロジェクトに取り込めます。オープンな svgl.app ライブラリを使用しており、すべてのプランで無料、使用量の上限もありません。

コードを取得

# Print a component's code + demo (by the id from search)
21st get 143 [--json]

# Print a theme's CSS (by a theme id from `search --type theme`)
21st theme <id> [--json]

インストール

# Install a component into the current project (shadcn under the hood)
21st add <user>/<slug>            # e.g. 21st add shadcn/button
21st add @<team>/<slug>           # from a team library
# --print to dump the shadcn command instead of running it

21st add はレジストリ項目を解決し、components/ui/<slug>.tsx に書き込み、プロジェクトのパッケージマネージャーで npm 依存関係をインストールします。公開項目や限定公開項目は、標準の shadcn でも利用できます。 npx shadcn@latest add "https://21st.dev/r/<user>/<slug>"。

生成

カタログに合うものがなく、21st usage で AI 生成が明示的に有効と報告されている場合は、ホスト型 21st AI で概要を作成し、ターミナルから反復して調整できます。この一連の流れ（21st generate → generation → iterate → take）については、21st-ai スキルを参照してください。AI が無効な場合は、カタログのコードをローカルで調整してください。

21st generate "a glassy pricing section with a monthly/yearly toggle"

プレビューが開きます。そこから任意のバリエーションを編集し、そのコードを取得できます。生成／反復／コード取得の全体的な流れと使用量の計測については、21st-ai スキルを参照してください。

---

ブックマーク、チーム、MCP 設定

21st bookmarks [--type component|theme|template]
21st bookmark <id> --type <kind> [--remove]     # heart / un-heart
21st lists                          # your bookmark lists
21st list <listId>

21st teams                          # your teams
21st team <teamId>                  # a team's libraries
21st team-components <teamId> [--library <id>]

21st init --client cursor|claude|codex|vscode|devin [--write]      # write MCP config
21st install-skill                  # install the 21st skills globally