Shadcn Studio MCP
About
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.
Details
- Author
- shadcnstudio
- Categories
- Developer Tools, Frontend, Other
Jump to
Setup
Install Shadcn Studio MCP in your MCP client (Claude Desktop, Cursor, Windsurf, and others).
Repository: https://github.com/shadcnstudio/shadcn-mcp-server
Follow the installation instructions in the repository README, then restart your MCP client.
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.
Try Shadcn Studio MCP Server for free today.
We've made installation super easy!
- Access theInstallation Guideand 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 forfree.
{ "mcpServers": { "shadcn-studio-mcp": { "command": "npx", "args": ["-y", "shadcn-studio-mcp"] } } }
{ "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, bothAPI_KEYandEMAILare required.
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 theShadcn Studio MCP Documentation.
Shadcn Studio MCP Server provides four main workflows:
See the complete documentation here:Shadcn Studio MCP Documentation.
/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.
/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.
/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.
/ftc generate code for the selected figma frame using shadcn/studio blocks /ftc Install matching shadcn/studio blocks for this design
- Official Documentation
- Installation Guide
- Shadcn Studio Blocks
- Shadcn Studio Components
- Shadcn Studio Themes
- Homepage
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
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 thecontributing guidelines.
This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.
A growing collection of MCP tools for Android Development. Currently features a deterministic Figma-SVG-to-Android-XML converter, with plans for Gradle analysis, Resource management, and ADB integration tools.
Integrates Cursor AI with Figma to read and programmatically modify designs.
Integrate Figma design data with AI coding tools using a local MCP server.
Provides Figma layout information to AI coding agents like Cursor.
Enables AI assistants to interact with and automate Figma designs programmatically.
Figma MCP server for accessing Figma files, projects, comments, components, and design metadata from Claude, Cursor, and other AI agents.
Connects to the Figma API, allowing AI tools to access and interact with your Figma designs.
Enables AI assistants to interact with Figma via WebSocket for reading data and design analysis.
Convert Figma designs into React Native components.
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
