SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场21st-cli-use

21st-cli-use

编程与开发

查看项目

更新于 10-13 15:15

技能介绍

用途

21st CLI（npx @21st-dev/cli，bin 命令为 21st）是 21st.dev 目录的命令行界面。它的核心用途是：先在目录中搜索，找到合适的条目后安装，只有在没有匹配项时才手写 UI。若需发布自己的组件、主题或模板，应使用 21st-registry 技能；若需将项目设计发布为主题，应使用 21st-design-sync。

鉴权

支持两种可互换的凭据，均作为 API key 发送：

  • 登录会话——运行 npx @21st-dev/cli login 会在浏览器中打开登录页，并将令牌保存到 ~/.config/21st/auth.json，适合交互式/开发机器。
  • API key——形如 21st_sk_… 的密钥，可从 https://21st.dev/mcp 或 https://21st.dev/settings/api-keys 获取，通过 --api-key <key> 或 TWENTYFIRST_TOKEN / API_KEY_21ST 环境变量传入，适合 CI。

21st whoami 显示已登录账户；21st usage 显示检索层级/配额以及 21st AI 生成状态，而不是 AI 积分余额。结构化状态可通过 MCP get_usage.aiGenerationEnabled 或 CLI 1.17.1+ 的 21st usage --json 获取。状态缺失或未知不代表已获得 AI 访问权限。21st logout 用于清除已保存的登录。

计费与额度

元数据（搜索、预览、主题 CSS）免费。获取组件代码（21st get、install）有免费每日配额；Builder 套餐包含无限检索。托管 21st AI 需要单独的 AI 访问权限并消耗 AI 积分。基础版 Builder 的 AI 处于关闭状态。在选择生成前先查看 21st usage：当 AI 未明确启用时，应搜索并检索代码，再用自己的编码智能体进行适配。对于返回 ai_subscription_required 的生成请求，在 AI 访问启用前不要重试。

查找

可搜索全部内容（组件 + 主题 + 模板），也支持按类型筛选：

21st search "pricing table" --limit 10
21st search button --type c        # 仅组件（c | theme | template）
21st search dark --type theme
# 过滤器：--tag <slug> --color <bucket> --sort <s> --free|--paid
#         --author <username> --mine --liked   --json 输出机器可读结果

建议在动手编写组件前始终先搜索——安装并适配一个接近的匹配项通常比从头构建更快。

Logo

可以搜索品牌与 UI 的 SVG 图标（免费，无需登录）：

21st logo discord            # 搜索品牌 + UI SVG logo（免费，无需登录）
21st logo "next js" --limit 5 --json

该命令打印每个 logo 的名称和 SVG url，便于直接用 curl 拉取到项目中。它使用开放的 svgl.app 库，在所有套餐中免费且不计量。

获取代码

按搜索结果中的 id 打印组件代码与演示，或打印主题的 CSS：

21st get 143 [--json]
21st theme <id> [--json]

安装

将组件安装到当前项目（底层使用 shadcn）：

21st add <user>/<slug>            # 例如 21st add shadcn/button
21st add @<team>/<slug>           # 来自团队库
# --print 仅输出 shadcn 命令而不执行

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 → 生成 → 迭代 → 取码）详见 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]     # 添加/移除收藏
21st lists                          # 查看书签列表
21st list <listId>

21st teams                          # 查看团队
21st team <teamId>                  # 查看团队库
21st team-components <teamId> [--library <id>]

21st init --client cursor|claude|codex|vscode|devin [--write]      # 写入 MCP 配置
21st install-skill                  # 全局安装 21st 技能