Overview - 21st

21st AI turns a text prompt into working UI. Instead of one answer, it generates several drafts at once so you can compare and pick the direction you like, then refine your choice in plain language.

The core loop

Describe what you want

Write a prompt — a landing hero, a pricing table, a settings page. Attach images or reference a marketplace component as a starting point.

Get multiple drafts

21st generates several variations in parallel so you can compare approaches side by side instead of iterating on a single guess.

Pick and refine

Choose your favorite draft and refine it with follow-up instructions (“make it bolder”, “add a toggle”, “use this theme”).

Take the code

Copy the code or a paste-ready prompt and drop it into your project, editor, or AI agent.

Two ways to generate

Sketch mode

Fast HTML/Tailwind drafts rendered in the browser. Best for exploring layout and visual direction quickly.

Code mode

Full React/shadcn components with a live preview and multi-turn editing. Best when you want real, installable code.

Where you can use it

Web

Generate and refine at 21st.dev/ai.

CLI

21st generate, iterate, and take from your terminal.

MCP

The same generation tools inside Cursor, Claude, and VS Code.

Generation uses credits. Search and browsing are free; each generation and refinement draws from your monthly credits. See Pricing & Credits.

FAQ Generation Modes

​The core loop

​Two ways to generate

Sketch mode

Code mode

​Where you can use it

Web

CLI

MCP

The core loop

Two ways to generate

Where you can use it