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 週前更新