Shadcn Studio MCP Server

Build modern, production-ready UI blocks, components, and full pages in minutes using Shadcn Studio. Seamlessly integrates with your favorite IDE and supports the most popular frameworks like React, Next.js.

🚀 What is Shadcn Studio MCP Server?

Shadcn Studio MCP Server is a Shadcn AI builder that helps you create, inspire, refine, and convert Figma designs into stunning, production-ready blocks, UI components, and full pages using Shadcn Studio blocks. It easily integrates directly into your favorite IDE for a fast & efficient workflow.

Try Shadcn Studio MCP Server for free today.

🛠️ Installation

We've made installation super easy!

1. Access the Installation Guide and select your IDE (VS Code, Cursor, Windsurf, etc.).
2. Follow the step-by-step instructions to set up the MCP Server in your IDE.
3. Start using Shadcn Studio MCP Server for free.

Quick Setup (npx)

{
  "mcpServers": {
    "shadcn-studio-mcp": {
      "command": "npx",
      "args": ["-y", "shadcn-studio-mcp"]
    }
  }
}

Pro Users (with API Key & Email)

{
  "mcpServers": {
    "shadcn-studio-mcp": {
      "command": "npx",
      "args": ["-y", "shadcn-studio-mcp", "API_KEY=your-api-key", "EMAIL=your@email.com"]
    }
  }
}

Note: For freemium features, no credentials are needed. For pro features, both API_KEY and EMAIL are required.

📒 Documentation

Shadcn Studio MCP Server is designed to be intuitive and easy to use. The commands are simple and straightforward, allowing you to create, inspire, refine, and convert Figma designs to UI blocks quickly.

For detailed documentation on how to use Shadcn Studio MCP Server, please refer to the Shadcn Studio MCP Documentation.

🔧 Usage

Shadcn Studio MCP Server provides four main workflows:

Command	Description	Use Case
/cui	Create UI	Customize and install from existing Shadcn Studio blocks
/iui	Inspire UI	Generate new, creative UI blocks inspired by existing ones
/rui	Refine UI	Refine, edit, or theme an existing block or page
/ftc	Figma to Code	Convert Figma designs blocks directly to Shadcn Studio blocks

See the complete documentation here: Shadcn Studio MCP Documentation.

Examples

Create UI (/cui):

/cui Create a hero section for an eLearning Academy site.
/cui Create a feature section for my SaaS landing page.
/cui Create a pricing section with a monthly/yearly toggle.

Inspire UI (/iui):

/iui Create a hero section for my AI SaaS - AI Video Generator.
/iui Create a feature section for my productivity app.
/iui Build a testimonials section inspired by modern design trends.

Refine UI (/rui):

/rui Update the theme to Modern Minimal.
/rui Replace the "Get Started" button with Login and Register buttons.
/rui Update the pricing card to Dynamic 3D Hover Card.
/rui Update the login button to animated ripple style.

Figma to Code (/ftc):

/ftc generate code for the selected figma frame using shadcn/studio blocks
/ftc Install matching shadcn/studio blocks for this design

📚 Documentation & Resources

• Official Documentation
• Installation Guide
• Shadcn Studio Blocks
• Shadcn Studio Components
• Shadcn Studio Themes
• Homepage

Community 🤝

Join the Shadcn Studio community to discuss the library, ask questions, and share your experiences:

• 🐦 Follow us on Twitter
• 💬 Discuss on GitHub
• 🎮 Join us on Discord

Contributing 📝

Fix a bug, or add a new feature. You can make a pull request and see your code in the next version of Shadcn Studio MCP.

Before adding a pull request, please see the contributing guidelines.