Skip to main content

​
Magic Chat: AI-powered UI builder

21st includes Magic Chat — an AI coding assistant that generates production-ready React components from natural language. Describe what you want, iterate with follow-up messages, and copy the code into your project.
  • Describe what you want in chat — from small tweaks to entire pages
  • Generate multiple variants and compare side by side
  • Use community components as building blocks for higher-quality output

​
Community: components for AI agents

21st also hosts a Community library of open-source React/Tailwind components, real app screens, and themes that you can use in Magic Chat or with any AI coding assistant (Cursor, Claude Code, Lovable, etc.).
  • Copy components and drop them into your repo via your editor
  • Paste prompts into AI coding assistants to generate variations
  • Browse production-ready components, real app screens, and themes

​
Who is 21st for?

  • Frontend engineers — Build UI faster with AI and high-quality community components.
  • Designers — Turn ideas, references, and screenshots into React components with Magic Chat.
  • Product teams & founders — Prototype, compare approaches, and collect feedback before writing production code.

​
Jump in

Magic Chat

AI-powered component generation.

Browse Community

Components, screens, and themes.

Publish Components

Share your work with the community.

​
Magic Chat

Overview

What Magic Chat is and how it works.

Quick Start

Create your first project in minutes.

Pricing & Plans

Free tier, Pro plans, and credits.

Manage Subscription

Change plan, view invoices, or cancel.

Keyboard Shortcuts

All shortcuts at a glance.

​
Community

Community Overview

Discover and use open-source React components.

Components

Browse production-ready React/Tailwind components.

Screens

Explore real app UI screenshots.

Themes

Copy color schemes and typography.

Keyboard Shortcuts

Navigate Community faster with hotkeys.

​
Publishing

Quick Start

Publish your first component.

Quality Guidelines

Standards for community components.

Component Structure

How to structure your component code.

​
Need Help?