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
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+P2
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
Works with VS Code, Cursor, Windsurf, Trae, and more