Shadcn Studio IDE Extension

Overview

The Shadcn Studio IDE Extension connects the Shadcn Studio library of 1,000+ blocks, 25+ templates and 1,000+ component variants to the editor. You can search and preview blocks, send the shadcn CLI install command straight to the terminal, and apply Shadcn Studio themes or your own saved themes in one click.

It ships with a companion toolbar for the running app: select an element in the browser, describe the change in plain language and send it to your IDE's AI agent. The extension supports VS Code, Cursor, Windsurf, TRAE and Antigravity, and the toolbar works with agents such as GitHub Copilot, Cline, Roo Code, Claude Code, Gemini CLI, Codex CLI and Kilo Code. There is a free plan; Pro is a one-time license.

Features

• Block search and preview: Browse Shadcn Studio blocks and templates from the editor
• CLI install: Copy the install command or send it to the terminal in one click
• Theme switching: Apply Shadcn Studio themes or saved custom themes
• Browser toolbar: Select elements in the running app and send change requests to your AI agent
• Wide editor support: VS Code, Cursor, Windsurf, TRAE and Antigravity

Setup

Install the extension in your editor, then run npx shadcn-studio-extension-cli@latest in the project and enter your dev server port.