@21st-dev/cli weekly downloads statistics

21st CLI

Search, retrieve, install and publish 21st.dev components, themes and templates from your terminal, generate UI with 21st AI, and wire the 21st MCP into your editor. The CLI and the 21st MCP share one endpoint and one login, so every command returns exactly what an MCP client (Cursor, Claude, etc.) sees.

One unified CLI. @21st-dev/cli (bin 21st) is now the single tool for everything 21st. It supersedes the older @21st-dev/registry (publish/install) and @21st-dev/magic (Magic MCP) packages — use 21st for all of it. Old @21st-dev/magic configs keep working: since 0.2.0 that package is a thin proxy to the same 21st MCP endpoint this CLI configures.

Install

npm i -g @21st-dev/cli
# or run without installing:
npx @21st-dev/cli search "pricing table"

Sign in

21st login      # opens your browser, saves a token locally (~/.config/21st)
21st whoami     # show the signed-in account
21st usage      # retrieval tier/quota + hosted AI access
21st usage --json # structured account capabilities, including aiGenerationEnabled

You can also authenticate with an API key from https://21st.dev/settings/api-keys via the TWENTYFIRST_TOKEN (or API_KEY_21ST) env var, or the --api-key <key> / --token <key> flag. A retired an_… key left in an env var is skipped so it can't shadow a working 21st login session.

Commands

Command	What it does
21st search <query> [--type component|theme|template] [--context auto|path] [--tag] [--color] [--sort] [--json]	Search metadata; Design Context adds confidence and fit rationales.
21st logo <query> [--limit N] [--json]	Search brand + UI SVG logos. Free, no login required.
21st get <id> [--json]	Print one component's code + demo by its search id (metered).
21st theme <id> [--json]	Print one theme's CSS by its search id — free.
21st add <user>/<slug> [--print]	Install a component via the 21st shadcn registry.
21st bookmarks [--type ...] [--limit N] / 21st bookmark <id> --type <kind> [--remove]	List / add / remove a bookmark ("heart") across any entity.
21st lists / 21st list <listId> / 21st list-new <name> / 21st list-add <listId> <id> --type <kind> [--remove]	Manage named bookmark lists.
21st teams / 21st team <teamId> / 21st team-lists <teamId> / 21st team-components <teamId> [--library <id>]	Browse your teams' shared libraries + lists.
21st components [--status all|draft|published|private] [--scope all|personal|team:<uuid>] [--json]	List every accessible personal/Team component and owned draft, using stable refs.
21st open <component:<id>|draft:<uuid>> [--no-open]	Resume a draft or create/resume a reviewed revision of an existing component; --no-open prints its URL.
21st publish <Component.tsx> [--component component:<id>] --description "…" [--to <library-slug>] [--preview <image>] [--no-open]	Create a draft, open CLI Review with live demos and automatic media, then publish a new component or an explicit owned revision.
21st submit <slug> / withdraw / resubmit / remove-from-catalog	Manage catalog review separately from Published/Private access.
21st publish-theme <theme.css> --name "…" [--tags a,b]	Publish a theme (CSS with :root + .dark).
21st publish-template <name> --site <url> --preview <img-url> [--price N]	Submit a template listing for review.
21st publish-gradient <recipe.json> --name "…" --thumbnail <image>	Publish a…