Magic by 21st.dev

Introducing Magic

AI Agent That Builds
Beautiful
UI Components

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

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

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

Describe Your Vision

Describe Your Vision

Simply tell the AI Agent what component you need by typing /ui and describing your idea - whether it's a pricing table, contact form, or navigation menu.

Choose from Options

Choose from Options

Magic generates three unique variations of your component. Review them and select the one that best matches your needs and design preferences.

Instant Integration

Instant Integration

Your IDE's AI Agent automatically integrates the chosen component into your project, handling all the necessary files and dependencies seamlessly.

Frequently Asked Questions

Everything you need to know about Magic AI Agent