21st MCP — UI Components for AI Coding Agents | 21st

Enable agentic workflows with 21st's powerful MCP server.

Install & sign in

Copy as prompt

One global install; login opens the browser and saves a token locally.

npm i -g @21st-dev/cli
21st login

In CI or scripts, skip login and pass --api-key $API_KEY_21ST (or set the env var) instead.

What do you want to do?

Each job is a skill CLI loads on its own, plus the command behind it. Install the skills once; the copy button hands over the whole prompt.

npx @21st-dev/cli install-skill

Find and install a component

Search the catalog, read the real code, bring it in with its dependencies.

Search free · 2 installs a day

21st search "pricing table"

Sketch UI with 21st AI

Draft several variants from a prompt, preview them, keep the one that works.

Uses AI credits

21st generate "a pricing table" --variants 3

Explore design directions

Meaningfully different directions grounded in this project, before any code.

show me three directions for this page

Build a screen in our style

Production UI that reuses the components and conventions already here.

build the settings screen in our style

Review the UI we have

Audit design, accessibility and responsive behavior with evidence, then fix.

audit this page and fix what is clearly broken

Publish our theme

Turn the project's own CSS variables into a theme the community can install.

21st publish-theme ./theme.css --name "Midnight"

Publish to our library

One file in, one install command out for everyone else on the team.

21st publish ./PinList.tsx

Manage what we shipped

Descriptions, tags and visibility across everything published, in one pass.

21st components --status all

Search, publishing and managing are free. Installs are capped at two a day, and 21st AI needs credits.