21st Cli Use

21st-dev/skill/skills/21st-cli-use

作者 21st-dev15c7436c41dc无许可证12 个星标收录于 2026年10月9日更新于 2026年10月9日仓库4周前更新

Search, install and pull code from the 21st.dev catalog with the `21st` CLI (`@21st-dev/cli`): find React/shadcn components, themes and templates, print a component's code or a theme's CSS, install an item into the project, or generate a new component with 21st AI. Use whenever the user says "search/find a component/theme on 21st", "install our team's Button", "add @user/slug", "pull that component's code", "найди компонент на 21st", "поставь наш компонент", or wants to script catalog access from the shell/CI. Auto-activate when a project has a `components.json` — search 21st before hand-writing UI.

仅含说明Software Development
AI 生成的概览

指导使用 21st CLI 从 21st.dev 目录搜索、安装和拉取 React/shadcn 组件、主题与模板。

功能
该技能说明 21st.dev 目录的命令行工具，涵盖身份验证、计量方式，以及搜索组件、主题和模板、打印组件代码或主题 CSS、将条目安装到项目、使用 21st AI 生成组件等命令。它还涉及 logo 查询、书签、团队库以及写入 MCP 客户端配置。它仅为说明文档，不附带脚本。
适用场景
当用户想要从 21st.dev 查找、安装或拉取组件、主题或模板的代码，或想从 shell 或 CI 脚本化访问目录时使用。它也用于在含有 components.json 的项目中自动激活，以便在手工编写 UI 之前先搜索 21st。
运行要求
需要 21st CLI（通过 npx @21st-dev/cli 运行）以及对 21st.dev 的网络访问。身份验证需要浏览器登录会话，或通过参数或环境变量传入 21st_sk_ API 密钥。安装组件依赖 shadcn 和项目的包管理器；AI 生成需要单独启用的 AI 访问权限。

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

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.

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 retrieval tier/quota and the 21st AI generation status, not an AI credit balance. For structured status, use MCP get_usage.aiGenerationEnabled or CLI 1.17.1+ 21st usage --json. Missing or unknown status does not grant AI access. 21st logout clears the saved login.

Metering

Metadata (search, previews, a theme's CSS) is free. Retrieving component code (21st get, install) has a free daily quota; Builder includes unlimited retrieval. Hosted 21st AI requires separate AI access and consumes AI credits. Base Builder has AI off. Check 21st usage before choosing generation: when AI is not explicitly enabled, search and retrieve code, then adapt it with your own coding agent. Do not retry a generation denied with ai_subscription_required until AI access is enabled.

Find

bash
# Search everything (components + themes + templates)21st search "pricing table" --limit 1021st 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

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.

Pull code

bash
# 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

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

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>".

Generate

When nothing in the catalog fits and 21st usage explicitly reports AI generation enabled, sketch it with hosted 21st AI and iterate from the terminal. That loop (21st generate → generation → iterate → take) lives in the 21st-ai skill. With AI off, adapt catalog code locally instead:

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.

Bookmarks, teams & MCP config

bash
21st bookmarks [--type component|theme|template]21st bookmark <id> --type <kind> [--remove]     # heart / un-heart21st lists                          # your bookmark lists21st list <listId>
21st teams                          # your teams21st team <teamId>                  # a team's libraries21st team-components <teamId> [--library <id>]
21st init --client cursor|claude|codex|vscode|devin [--write]      # write MCP config21st install-skill                  # install the 21st skills globally

来源与署名

来源：21st-dev/skill位于skills/21st-cli-use提交15c7436

许可证： 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

更多来自 21st-dev/skill 的技能

21st Ui Review

21st-dev

审查现有 UI 的无障碍、响应式与设计系统缺陷，并提供安全的确定性修复。

Design & Creative124周前更新

21st Ui Explore

21st-dev

Explore and compare multiple meaningfully different UI directions grounded in the current project's design system and 21st inspiration. Use when the user wants options, variants, concepts, a redesign direction, visual experimentation, or is unsure how a new interface should look. Trigger for requests such as "show me three directions", "explore alternatives", "what could this page look like", or "generate variants". Do not use for a straightforward implementation with an already-selected direction.

待分类124周前更新

21st Ui Build

21st-dev

Build or substantially change production UI using the current project's design context, existing components, and grounded 21st inspiration. Use when implementing a page, section, component, responsive redesign, or visual polish in an existing web project. Trigger for requests such as "build this UI", "implement this screen", "make this page production-ready", or "use 21st to create the interface". Use 21st-ui-explore first when the visual direction is intentionally undecided, and 21st-ui-review for critique-only work.

待分类124周前更新

21st Registry

21st-dev

Publish your own work to 21st.dev and manage it from the terminal with the `21st` CLI (`@21st-dev/cli`): publish a React component to a team library, publish a CSS theme or a template listing, edit / unpublish / delete your published items, list and reopen existing component work, and read/replace your public profile page (bento board). Triggers when the user says "publish/share/upload this to 21st", "залей в наш регистр", "опубликуй компонент/тему/темплейт", "share with team", "make this reusable", "unpublish/edit/delete my component", "change its visibility", "find/open my old component or draft", "найди/открой мой старый компонент или драфт", "add this to my 21st profile/bento", "update my profile page", "обнови мой профиль на 21st", "добавь блок в бенто", "add controls/knobs to my demo", "сделай демо с контролами". For finding and installing existing items use `21st-cli-use`; for turning a project's design tokens into a theme use `21st-design-sync`.

待分类124周前更新

21st Design Sync

21st-dev

读取项目的 shadcn/Tailwind 设计令牌，并将其作为公开主题发布到 21st.dev。

Design & Creative124周前更新

21st Ai

21st-dev

Generate and iterate on UI with 21st AI from the terminal via the `21st` CLI (`@21st-dev/cli`): sketch a UI from a prompt, preview the variants in the browser, edit any variant in place with a natural-language change, and pull the final code into the project. Use whenever the user wants to BUILD / SKETCH new UI ("sketch a pricing page", "generate a hero with 21st", "make me a <X> section"), ITERATE on a generated draft ("edit the third variant", "add a toggle to that take"), or GRAB the code of a draft ("pull that variant's code", "сгенери UI на 21st", "поправь третий вариант", "забери код того наброска"). For finding/installing existing components use the `21st-cli-use` skill; to publish your own, `21st-registry`.

待分类124周前更新

更多Software Development技能

Playground

anthropics

精选

构建自包含的交互式 HTML 演练场，包含控件、实时预览和可复制的提示词输出。

Software Development37K今天更新

M5 Onboard

anthropics

精选

通过 USB 检测 M5Stack ESP32 开发板，刷写 UIFlow 2.0 固件并安装 MicroPython 应用包。

Software Development37K今天更新

Cardputer Buddy

anthropics

精选

指导迭代 Cardputer-Adv 的 MicroPython 应用包：添加应用、通过 USB 串口推送文件、查看日志并运行 REPL 命令。

Software Development37K今天更新

Web Design Guidelines

vercel-labs

精选

依据从远程来源获取的 Web Interface Guidelines 审查 UI 代码，并以 file:line 形式报告问题。

Software Development32K5周前更新

Vercel React Native Skills

vercel-labs

精选

React Native 与 Expo 最佳实践规则，涵盖列表性能、动画、导航、UI 模式、状态与 monorepo 配置。

Software Development32K5周前更新

Vercel React Best Practices

vercel-labs

精选

Vercel 的 React 与 Next.js 性能指南，以 70 条规则的形式用于编写、审查和重构代码。

Software Development32K5周前更新