21st.dev

21st.dev IDE Extension

Code with AI,
Edit with Precision

Select an element, write a prompt, and let AI instantly edit,
create or fix it - right from the toolbar.

Universal IDE Support

Works with all major editors and AI agents

VS Code

Install from VS Code Marketplace or Extensions tab

Install IDE Extension →
Cursor

Cursor

Install from Extensions tab or manually from Open VSX

Install IDE Extension →

Windsurf

Install from Extensions tab or download .vsix file

Install IDE Extension →

Trae

Install 21st.dev extension for Trae IDE

Install IDE Extension →

AI Agent Compatibility

GitHub CopilotClineRoo CodeKilo CodeClaude CodeGemini CLIAny AI Agent

Some agents work via Copy Prompt feature

Works With Your Stack

21st.dev integrates seamlessly with popular frontend frameworks

React
Vue
Angular
Svelte
Next.js
Nuxt

Quick Setup

Install IDE extension, then add the toolbar to your app

AI Setup

Automated installation

1

Open Command Palette

Cmd+Shift+P
2

Type command

3

Execute & done! ✨

Recommended for beginners

Manual Setup

Full control & customization

1

Install package

2

Import & initialize

Add to your app entry point

3

Framework packages

React, Next.js, Vue, etc.

Advanced configuration available

Setup takes less than 2 minutes

Ready to get started?

Install the IDE Extension

Documentation

Works with VS Code, Cursor, Windsurf, Trae, and more

Powered byStagewise•Fork of Stagewise IDE