The core loop
1
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.
2
Get multiple drafts
21st generates several variations in parallel so you can compare approaches
side by side instead of iterating on a single guess.
3
Pick and refine
Choose your favorite draft and refine it with follow-up instructions
(“make it bolder”, “add a toggle”, “use this theme”).
4
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 and is a paid feature. Search and browsing are
free; each generation and refinement draws from your available balance. Turn
on AI for Builder or Team and choose a monthly allowance of 500, 1,000, or
2,000 credits. See Pricing & Credits.