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

21st-cli-use

前端与建站

查看项目

更新于 10-15 08:33

技能介绍

用途

21st CLI（npx @21st-dev/cli，命令名 21st）是 21st.dev 目录的命令行界面，用于在终端中查找、安装并生成目录内容。资料强调：先搜索，安装合适的，只有在没有匹配项时才手写 UI。若要发布自己的组件/主题/模板，可使用 21st-registry 技能；若要把项目的设计发布为主题，可使用 21st-design-sync。

认证

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

  • 登录会话：npx @21st-dev/cli login 会打开浏览器并将 token 保存到 ~/.config/21st/auth.json，适合交互式/开发机器。
  • API key：从 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 生成状态，而非 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 访问启用前重试。

查找

可使用以下命令搜索组件、主题和模板：

# 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 用于搜索品牌和 UI 的 SVG 徽标（免费，无需登录）：

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

该命令会打印每个徽标的名称和 SVG url(s)，可直接用 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

适用场景

适用于需要从 21st.dev 目录查找并复用 React/shadcn 组件、主题和模板的开发者；在终端中完成搜索、预览、安装、拉取代码，以及在满足 AI 访问条件时进行托管生成。也可用于配置 MCP 客户端、管理书签与团队库。

限制

  • 检索组件代码（21st get、install）受每日免费配额限制；Builder 提供无限检索。
  • 托管 21st AI 需要单独的 AI 访问权限并消耗 AI 积分；基础版 Builder 的 AI 处于关闭状态。若 AI 未明确启用，应搜索并检索代码后用编码智能体本地适配，不应重试被拒绝的生成。
  • 21st usage 显示的是检索层级/配额与 AI 生成状态，并非 AI 积分余额。状态缺失或未知不会授予 AI 访问权限。
  • 其他功能（如价格、平台可用性等）资料未提供，暂未提供。