Back to Details

21st-cli-use

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

21st CLI — find, install & generate from the terminal

21st CLI — 从终端查找、安装与生成内容

The 
21st
CLI (
npx @21st-dev/cli
, bin 
21st
) is the command-line surface for the 21st.dev catalog. Search first, install what fits, and only hand-write UI when nothing matches. To publish your own components/themes/templates, use the 
21st-registry
skill; to publish a project's design as a theme, use 
21st-design-sync
.
21st
CLI（
npx @21st-dev/cli
，命令行工具
21st
）是21st.dev目录的命令行交互界面。先搜索，安装合适的内容，只有在没有匹配项时再手写UI。若要发布你自己的组件/主题/模板，请使用
21st-registry
技能；若要将项目设计发布为主题，请使用
21st-design-sync
。

Auth (do this once)

身份验证（只需执行一次）

Two interchangeable credentials, both sent as the API key:
  1. Login session — 
    npx @21st-dev/cli login
    opens the browser and saves a token to 
    ~/.config/21st/auth.json
    . Best for interactive/dev machines.
  2. API key — 
    21st_sk_…
    from https://21st.dev/mcp (or https://21st.dev/settings/api-keys). Pass via 
    --api-key <key>
    or the 
    TWENTYFIRST_TOKEN
    / 
    API_KEY_21ST
    env var. Best for CI.
21st whoami
shows the signed-in account; 
21st usage
shows tier + remaining free quota; 
21st logout
clears the saved login.
两种可互换的凭据，均作为API密钥使用：
  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 logout
清除已保存的登录信息。

Metering

计量规则

Metadata (search, previews, a theme's CSS) is free. Retrieving component code (
21st get
, install) and AI generation are metered per user: a small free daily quota, then a paywall (
21st usage
shows what's left). Community access / membership lifts the quota.
元数据（搜索、预览、主题CSS）是免费的。获取组件代码（
21st get
、安装）和AI生成功能按用户计量：每日有少量免费配额，超出后需付费（
21st usage
可查看剩余配额）。社区访问/会员资格可提升配额。

Find

查找内容

bash
undefined
bash
undefined

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
21st search "pricing table" --limit 10 21st search button --type c # 仅搜索组件（c | theme | template） 21st search dark --type theme

Filters: --tag <slug> --color <bucket> --sort <s> --free|--paid

筛选条件：--tag <slug> --color <bucket> --sort <s> --free|--paid

--author <username> --mine --liked --json for machine output

--author <username> --mine --liked --json 用于机器可读输出


**Always search before hand-writing a component** — a close match is usually
faster to install and adapt than to build from scratch.

**手写组件前务必先搜索**——通常安装并适配一个相近的匹配项，比从零开始构建更快。

Logos

图标

bash
21st logo discord            # search brand + UI SVG logos (free, no login)
21st logo "next js" --limit 5 --json
Prints each logo's name and SVG url(s) to curl straight into a project. Uses the open svgl.app library; free and unmetered on every plan.
bash
21st logo discord            # 搜索品牌和UI SVG图标（免费，无需登录）
21st logo "next js" --limit 5 --json
打印每个图标的名称和SVG链接，可直接通过curl导入项目。使用开源svgl.app库；所有套餐均免费且无计量限制。

Pull code

拉取代码

bash
undefined
bash
undefined

Print a component's code + demo (by the id from search)

打印组件代码 + 示例（使用搜索结果中的id）

21st get 143 [--json]
21st get 143 [--json]

Print a theme's CSS (by a theme id from 
search --type theme
)

打印主题CSS（使用
search --type theme
结果中的主题id）

21st theme <id> [--json]
undefined
21st theme <id> [--json]
undefined

Install

安装

bash
undefined
bash
undefined

Install a component into the current project (shadcn under the hood)

将组件安装到当前项目（底层基于shadcn）

21st add <user>/<slug> # e.g. 21st add shadcn/button 21st add @<team>/<slug> # from a team library
21st add <user>/<slug> # 示例：21st add shadcn/button 21st add @<team>/<slug> # 从团队库安装

--print to dump the shadcn command instead of running it

--print 参数用于输出shadcn命令而非直接执行


`21st add` resolves the registry item, writes it to `components/ui/<slug>.tsx`,
and installs npm deps with the project's package manager. Public/unlisted items
also work with stock shadcn:
`npx shadcn@latest add "https://21st.dev/r/<user>/<slug>"`.

`21st add`会解析注册表项，将其写入`components/ui/<slug>.tsx`，并通过项目的包管理器安装npm依赖。公开/未公开的项目也可配合原生shadcn使用：
`npx shadcn@latest add "https://21st.dev/r/<user>/<slug>"`。

Generate

生成内容

When nothing in the catalog fits, sketch it with 21st AI and iterate on it from the terminal — that whole loop (
21st generate
→ 
generation
→ 
iterate
→ 
take
) lives in the 
21st-ai
 skill:
bash
21st generate "a glassy pricing section with a monthly/yearly toggle"
Opens a preview; from there you edit any variant and pull its code. See the 
21st-ai
skill for the full generate/iterate/grab-code flow and metering.
当目录中没有合适的内容时，通过21st AI快速生成原型，并从终端进行迭代——整个流程（
21st generate
→ 
generation
→ 
iterate
→ 
take
）都在**
21st-ai
**技能中实现：
bash
21st generate "a glassy pricing section with a monthly/yearly toggle"
打开预览界面；你可以在其中编辑任何变体并拉取其代码。有关完整的生成/迭代/获取代码流程及计量规则，请查看
21st-ai
技能。

Bookmarks, teams & MCP config

书签、团队与MCP配置

bash
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|windsurf [--write]   # write MCP config
21st install-skill                  # install the 21st skills globally
bash
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|windsurf [--write]   # 写入MCP配置
21st install-skill                  # 全局安装21st技能