Shadcn Studio MCP

★ 1

from shadcnstudio

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.

🔥🔥🔥Account requiredNeeds API keys

#email #automation #social-media #git #design

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?

Try Shadcn Studio MCP Server for free today.

📒 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.

📚 Documentation & Resources

🛠️ Installation

We've made installation super easy!

Access the Installation Guide and select your IDE (VS Code, Cursor, Windsurf, etc.).
Follow the step-by-step instructions to set up the MCP Server in your IDE.
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.

🔧 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