21st-cli-use

Name: 21st-cli-use
Author: 21st-dev

github.com/21st-dev设计与 UI312.1k 次安装7 周前更新

代码仓库

关于 21st-cli-use

此 Skill 介绍用于搜索 21st.dev 目录、提取并安装 UI 组件及管理相关资源的 `21st` CLI，也涵盖身份验证、用量限制和托管 AI 生成功能的可用条件。

主要功能

01搜索组件、主题和模板
02提取组件代码与主题 CSS
03将组件安装到项目
04查找 SVG 标志并管理收藏
05查看账户权限与用量

适用场景

01构建组件前先查找目录中的现有方案
02在项目中安装匹配的组件
03提取主题 CSS 或品牌标志资源

MCP 相关

此 Skill 涵盖 CLI 的 MCP 配置，以及通过 MCP 工具 `get_usage` 查询用量。目录搜索等主要工作流通过命令行使用。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/21st-dev/skill --skill 21st-cli-use

安装后在 Claude Code 中输入/21st-cli-use确认已加载。

详细介绍

21st CLI — 在终端中查找、安装和生成

21st CLI（npx @21st-dev/cli，可执行文件 21st）是用于访问 21st.dev 目录的命令行工具。先搜索，安装合适的内容；只有找不到匹配项时，才手动编写 UI。要发布自己的组件／主题／模板，请使用 21st-registry 技能；要将项目设计发布为主题，请使用 21st-design-sync。

身份验证（只需设置一次）

两种可互换的凭证，都会作为 API 密钥发送：

登录会话 — npx @21st-dev/cli login 会打开浏览器，并将令牌保存到 ~/.config/21st/auth.json。最适合交互式／开发机器。
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、安装）有每日免费配额；Builder 包含无限检索额度。托管的 21st AI 需要单独的 AI 访问权限，并会消耗 AI 积分。Base Builder 默认关闭 AI。选择生成方式前，请先检查 21st usage：如果未明确启用 AI，请搜索并检索代码，然后使用自己的编码 Agent 进行调整。若生成因 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 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

支持 Markdown

登录后评论