NewIDE Extension & Toolbar

Build UI 10x Faster
Right Inside Your Browser or IDE

Design visually, drop in Shadcn Blocks & Themes, and ship faster with AI assistance - without leaving your Browser or IDE.

Trusted by 1600+
Shadcn Creators & Teams

Build UI 10x Faster

Edit visually in real time with AI - no tab switching needed.

No Context Switching

Access 750+ Shadcn UI blocks and edit instantly from browser or IDE.

Pick Your Framework

Works seamlessly with the Shadcn ecosystem, including Next.js, React, TanStack, and more.


Supported IDEs

Integrate with Your Favorite IDE

Works with all major editors, browsers and AI agents

AI Agent Compatibility

One click installation for the

GitHub CopilotGitHub Copilot
ClineCline
Roo CodeRoo Code
Claude CodeClaude Code
Gemini CLIGemini CLI
Codex CLICodex CLI
Kilo CodeKilo Code
GitHub CopilotGitHub Copilot
ClineCline
Roo CodeRoo Code
Claude CodeClaude Code
Gemini CLIGemini CLI
Codex CLICodex CLI
Kilo CodeKilo Code
GitHub CopilotGitHub Copilot
ClineCline
Roo CodeRoo Code
Claude CodeClaude Code
Gemini CLIGemini CLI
Codex CLICodex CLI
Kilo CodeKilo Code
GitHub CopilotGitHub Copilot
ClineCline
Roo CodeRoo Code
Claude CodeClaude Code
Gemini CLIGemini CLI
Codex CLICodex CLI
Kilo CodeKilo Code

IDE Extension

shadcn/studio IDE Extension

Search, preview, and integrate Shadcn UI blocks & themes instantly from IDE, Install them to your project using CLI - all without switching the context.


Toolbar

shadcn/studio Toolbar

Edit your UI visually in real-time within your browser, seamlessly sync changes with your IDE, and enhance your development process with intuitive tools, including @ mentions and customizable toolbar controls.


Installation

Quick Setup

Install IDE extension, then add the toolbar to your application.

2

Install shadcn/studio Toolbar with CLI

Open the terminal and run:

When prompted, enter your dev server port (3000 for Nuxt/Next.js, 5173 for Vite).

Once the server is running, you'll see the shadcn/studio toolbar in the bottom-right corner of your browser.

Refer Install shadcn/studio Toolbar with CLI docs for more...

Setup takes less than 1 minutes

Technology Support

Framework Compatibility

shadcn/studio IDE Extension is fully compatible wherever shadcn/ui is in action, from React to Next.js and more...

Next.jsReact
Vite
astro
LaravelReact Query

Explore framework-specific guides to learn how to integrate shadcn/ui with different frameworks


Stats

shadcn/studio Impact

Celebrating the milestones achieved with shadcn/studio.

0

GitHub Stars

0+

Component Variants

0+

Blocks

0+

shadcn/studio Users

0+

Figma Plugin Users


Reviews

The Wall of Love

Here's what some of our users have to say about shadcn/studio.

s

shadcn

@shadcn

x.comx.com
Nice.
AT

Alem Tuzlak 🇧🇦

@AlemTuzlak

x.comx.com
Looks cool!
MP

Meet Patel

@___meetpatel___

x.comx.com

Beautiful UI & Great UX while using it
Highly Recommend to everyone👐🏻

NR

Nour Rouas

@rouas_nour

x.comx.com

My SaaS tech stack in one tweet:

📝 PRD: Claude @AnthropicAI
🎨 UI: @lovable_dev
🧑‍💻 Refined: @cursor_ai
🧩 Components: @ShadcnStudio
🎯 Styling: @tailwindcss
🔧 Backend/Auth: @supabase
💳 Payments: @stripe
🚀 Deploy: @vercel

Still building. Follow for updates.

s

shadcn

@shadcn

x.comx.com
Nice. The cli integration looks great.
Will give it a try.
U

Urvish

@0xUrvish

x.comx.com
this is insane,

you have build large ecosystem of shadcn components and seeing the gap between designer and developer and adding more and more features and maintaining. shadcnstudio is on next level.
K

KapishDima

@kapish_dima

x.comx.com
I really love what these guys are building! The huge number of components and blocks is just mind-blowing :) MCP out of the box and IDE support make it super convenient.
a

abdullah

u/simpleguy231

RedditReddit
Wow, this looks amazing! 🎉 The live theme generator feature is definitely a game changer for UI customization, and the seamless integration with Tailwind v4 makes it even more powerful. I love how easy it seems to tweak colors, typography, and save custom themes for reuse. 🙌 I'll definitely give it a try and share any feedback, but so far, this looks like a tool I'd love to incorporate into my projects. Great job on this! 👏✨
TC

Terry Carson

@mrterrycarson

x.comx.com
This is awesome! Love seeing fresh ideas combined with smooth animations. Excited to try these out, especially the Spotify and VS Code themes!
s

shadcn

@shadcn

x.comx.com
Nice.
AT

Alem Tuzlak 🇧🇦

@AlemTuzlak

x.comx.com
Looks cool!
MP

Meet Patel

@___meetpatel___

x.comx.com

Beautiful UI & Great UX while using it
Highly Recommend to everyone👐🏻

NR

Nour Rouas

@rouas_nour

x.comx.com

My SaaS tech stack in one tweet:

📝 PRD: Claude @AnthropicAI
🎨 UI: @lovable_dev
🧑‍💻 Refined: @cursor_ai
🧩 Components: @ShadcnStudio
🎯 Styling: @tailwindcss
🔧 Backend/Auth: @supabase
💳 Payments: @stripe
🚀 Deploy: @vercel

Still building. Follow for updates.

s

shadcn

@shadcn

x.comx.com
Nice. The cli integration looks great.
Will give it a try.
U

Urvish

@0xUrvish

x.comx.com
this is insane,

you have build large ecosystem of shadcn components and seeing the gap between designer and developer and adding more and more features and maintaining. shadcnstudio is on next level.
K

KapishDima

@kapish_dima

x.comx.com
I really love what these guys are building! The huge number of components and blocks is just mind-blowing :) MCP out of the box and IDE support make it super convenient.
a

abdullah

u/simpleguy231

RedditReddit
Wow, this looks amazing! 🎉 The live theme generator feature is definitely a game changer for UI customization, and the seamless integration with Tailwind v4 makes it even more powerful. I love how easy it seems to tweak colors, typography, and save custom themes for reuse. 🙌 I'll definitely give it a try and share any feedback, but so far, this looks like a tool I'd love to incorporate into my projects. Great job on this! 👏✨
TC

Terry Carson

@mrterrycarson

x.comx.com
This is awesome! Love seeing fresh ideas combined with smooth animations. Excited to try these out, especially the Spotify and VS Code themes!
s

shadcn

@shadcn

x.comx.com
Nice.
AT

Alem Tuzlak 🇧🇦

@AlemTuzlak

x.comx.com
Looks cool!
MP

Meet Patel

@___meetpatel___

x.comx.com

Beautiful UI & Great UX while using it
Highly Recommend to everyone👐🏻

NR

Nour Rouas

@rouas_nour

x.comx.com

My SaaS tech stack in one tweet:

📝 PRD: Claude @AnthropicAI
🎨 UI: @lovable_dev
🧑‍💻 Refined: @cursor_ai
🧩 Components: @ShadcnStudio
🎯 Styling: @tailwindcss
🔧 Backend/Auth: @supabase
💳 Payments: @stripe
🚀 Deploy: @vercel

Still building. Follow for updates.

s

shadcn

@shadcn

x.comx.com
Nice. The cli integration looks great.
Will give it a try.
U

Urvish

@0xUrvish

x.comx.com
this is insane,

you have build large ecosystem of shadcn components and seeing the gap between designer and developer and adding more and more features and maintaining. shadcnstudio is on next level.
K

KapishDima

@kapish_dima

x.comx.com
I really love what these guys are building! The huge number of components and blocks is just mind-blowing :) MCP out of the box and IDE support make it super convenient.
a

abdullah

u/simpleguy231

RedditReddit
Wow, this looks amazing! 🎉 The live theme generator feature is definitely a game changer for UI customization, and the seamless integration with Tailwind v4 makes it even more powerful. I love how easy it seems to tweak colors, typography, and save custom themes for reuse. 🙌 I'll definitely give it a try and share any feedback, but so far, this looks like a tool I'd love to incorporate into my projects. Great job on this! 👏✨
TC

Terry Carson

@mrterrycarson

x.comx.com
This is awesome! Love seeing fresh ideas combined with smooth animations. Excited to try these out, especially the Spotify and VS Code themes!
s

shadcn

@shadcn

x.comx.com
Nice.
AT

Alem Tuzlak 🇧🇦

@AlemTuzlak

x.comx.com
Looks cool!
MP

Meet Patel

@___meetpatel___

x.comx.com

Beautiful UI & Great UX while using it
Highly Recommend to everyone👐🏻

NR

Nour Rouas

@rouas_nour

x.comx.com

My SaaS tech stack in one tweet:

📝 PRD: Claude @AnthropicAI
🎨 UI: @lovable_dev
🧑‍💻 Refined: @cursor_ai
🧩 Components: @ShadcnStudio
🎯 Styling: @tailwindcss
🔧 Backend/Auth: @supabase
💳 Payments: @stripe
🚀 Deploy: @vercel

Still building. Follow for updates.

s

shadcn

@shadcn

x.comx.com
Nice. The cli integration looks great.
Will give it a try.
U

Urvish

@0xUrvish

x.comx.com
this is insane,

you have build large ecosystem of shadcn components and seeing the gap between designer and developer and adding more and more features and maintaining. shadcnstudio is on next level.
K

KapishDima

@kapish_dima

x.comx.com
I really love what these guys are building! The huge number of components and blocks is just mind-blowing :) MCP out of the box and IDE support make it super convenient.
a

abdullah

u/simpleguy231

RedditReddit
Wow, this looks amazing! 🎉 The live theme generator feature is definitely a game changer for UI customization, and the seamless integration with Tailwind v4 makes it even more powerful. I love how easy it seems to tweak colors, typography, and save custom themes for reuse. 🙌 I'll definitely give it a try and share any feedback, but so far, this looks like a tool I'd love to incorporate into my projects. Great job on this! 👏✨
TC

Terry Carson

@mrterrycarson

x.comx.com
This is awesome! Love seeing fresh ideas combined with smooth animations. Excited to try these out, especially the Spotify and VS Code themes!

Pricing

Simple Pricing

Get access to everything for lifetime, use for unlimited projects.
Trusted by the top designers, developers & agencies.

CODEAGENCYBITWIPGrooved LearningScale AppAttentiveChrono InnovationOne X TechVerilifeFacilitySightCapgeminiMercedesDHL
CODEAGENCYBITWIPGrooved LearningScale AppAttentiveChrono InnovationOne X TechVerilifeFacilitySightCapgeminiMercedesDHL
CODEAGENCYBITWIPGrooved LearningScale AppAttentiveChrono InnovationOne X TechVerilifeFacilitySightCapgeminiMercedesDHL
CODEAGENCYBITWIPGrooved LearningScale AppAttentiveChrono InnovationOne X TechVerilifeFacilitySightCapgeminiMercedesDHL

New components, blocks, and templates dropped every month.

Flat

30% OFF
For Next 500 Users
Hurry, prices go up soon!
Users Access
Commercial Usage
Shadcn Blocks
10+ Shadcn Templates
1000+ Components Variants
Drag & Drop Builder
Shadcn UI Kit for Figma
Figma to Code
MCP Server
IDE Extension & Toolbar
Theme Generator
Support Response Time

Community

Open Source

Freeforever
Get Started
Unlimited
Unlimited
Limited
Limited
Components Code
Limited
Limited
Limited
Limited
Community support

Basic

For individual creators

$99
$219
one-time pay
Single
Unlimited
Limited
Limited
Limited
Limited
Limited
48 business hours
Best Value

Pro

For serious builders

$199
$359
one-time pay
Single
Unlimited
48 business hours

Team

Best for growing teams

$449
$719
one-time pay
15 Seats
Unlimited
24 business hours

Enterprise

Best for large teams

$849
$1299
one-time pay
Unlimited Seats
Unlimited
24 business hours

Secure 256-bit SSL Encrypted payments by Polar.

Got a question(s)? Read all the FAQs.


FAQ

Any Questions?

Browse through these FAQs to find answers to commonly asked questions.