Welcome to 21st

Canvas: visual frontend work on your repo

21st is a visual frontend canvas for your real repository. Canvas turns your repository into a visual workspace where each frame is a branch. You work on real code with live previews, use Iterate mode for direct edits, and Plan mode when you want multiple implementation approaches to compare side by side — all before you open a PR. Your core loop:

Describe what you want in chat — from small tweaks to new flows
Let AI propose edits or multiple variants, grounded in your repo and context
Review diffs and previews on the canvas, then iterate again or open a PR

Community: components for Canvas and AI agents

On top of Canvas, 21st includes a Community library of open-source React/Tailwind components, real app screens, and themes that you can use inside Canvas or with any AI coding assistant (Cursor, Claude Code, Lovable, etc.).

Copy components and drop them into your repo via Canvas or your editor
Use component links and prompts directly in Canvas chat as building blocks
Paste prompts into AI coding assistants like Cursor, Claude Code, Lovable, or others to generate variations in their environments

Who is 21st for?

Frontend engineers — Build and refactor UI faster on a live repo with an AI coding agent.
Designers — Turn ideas, references, and screenshots into high-fidelity React components.
Product teams & founders — Prototype, compare variants, and collect feedback on real running UIs.

What makes 21st different?

Frames as branches — Every Canvas frame maps to a Git branch or empty project variant.
Works on your real codebase — Run your app inside 21st, not just mockups.
Community of real components — Not just screenshots: installable, remixable React code.
AI that understands context — Combines your repo, components library, and inspiration screens.