Magic by 21st.dev

Introducing Magic

The AI Agent That Builds Beautiful UI Components

Empower your IDE with an AI extension that creates stunning, production-ready components inspired by 21st.dev

JDASMK
20,114+ people using Magic
Magic Agent Demo

Supported IDEs

Use Magic with your favorite IDEs

Powerful Features

Everything you need to build modern UI components

Add New Components

Add New Components

Create UI components by describing what you need. Magic generates production-ready code instantly.

Enhance Existing UI

Enhance Existing UI

Soon

Improve components with advanced features and animations. Upgrade without starting from scratch.

SVGL Integration
Access Logo Library

Access Logo Library

Integrate company logos and icons via SVGL. Access a vast collection of professional brand assets.

How It Works

Create beautiful UI components in three simple steps

Tell Agent What You Need

Tell Agent What You Need

In your AI Agent's chat, just type /ui and describe the component you're looking for—maybe a waitlist form or a login page.

Let Magic Create It

Let Magic Create It

Your IDE (e.g., Cursor) prompts you to use Magic. Magic then instantly builds a polished UI component, inspired by 21st.dev's library.

Seamless Integration

Seamless Integration

With a single click, Magic adds the new files directly into your project, so you can start using your brand-new UI right away.

Frequently Asked Questions

Everything you need to know about Magic AI Agent