shadcn-studio MCP Server
Build production-ready UI components, blocks, and landing pages in minutes. Seamlessly integrate with your favorite IDE for lightning-fast development.
What is shadcn-studio MCP Server?
shadcn-studio MCP Server is an AI-powered tool that integrates directly into your IDE, enabling you to effortlessly create, inspire, and refactor stunning, production-ready UI components and blocks using shadcn-studio extensive component library.
- Free Version: Try shadcn-studio MCP Server for free. Please note that in the free version, it might be possible that the MCP server doesn't show as much creativity and keeps the UI simple due to limited free blocks.
- Pro Version: Unlock advanced capabilities of shadcn-studio MCP, premium blocks, and priority support with a pro upgrade.
If you're upgrading from the free version to Pro, you'll need to update your components.json file and environment variables. After upgrading, log in to your account and visit the MCP onboarding page again to update your configuration with your new license key.
React & Next.js Compatible
Works seamlessly with React, Next.js, and TypeScript projects
IDE Integration
Supports VS Code, Cursor, Windsurf, and Cline
Production Ready
Generate clean, accessible, and responsive components
Tailwind CSS
Built with Tailwind CSS and shadcn/ui components
Installation
We've made installation super easy!
Ensure that shadcn project is properly set up in your project before proceeding. Refer to the Setup Guide for more details.
You can find a complete Installation and setup guide specific to your IDE. Just head over to the Install shadcn-studio MCP section from your shadcn-studio Pro account and select your preferred IDE (e.g., VS Code, Cursor, Windsurf, etc.) to start installation.
You can access the shadcn-studio MCP Installation guide here:Installation Guide
Follow the step-by-step instructions to get the MCP Server running in your favorite IDE.
We have also created a video tutorial to help you with the installation process. You can watch it here:
How to Use the shadcn-studio MCP Server?
shadcn-studio MCP Server comes with four powerful commands to generate, customize, and refine UI components:
| Command | Purpose | Ideal For |
|---|---|---|
| /cui | Customize from existing shadcn-studio block | Using existing blocks with custom content |
| /iui Pro user only | Generate a new, inspired UI | Creative and unique designs |
| /rui | Refine or edit an existing block | Making updates or tweaks |
| /ftc Requires Figma MCP | Install blocks from Figma design | Converting Figma mockups to code |
These commands allow you to generate, customize, and refine UI components based on the shadcn/studio's Pro/Free Blocks and your project's context.
We have created a video tutorial to help you understand how to use these commands effectively:
Let's explore each command in detail:
Create UI (/cui)
Use this command when you want to reuse the structure and feel of an existing shadcn-studio block, but customized for your own content and use-case. You can either let the MCP Server pick the best match for your request, or you can specify the exact block.
Use case:
You want to replicate a block layout with your own content.
Examples:
- •
/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 3 tiers for my app. - •
/cui Create a feature section for my landing page using Features 8.
Figma to Code (/ftc) - Generate Landing Pages with Pro/Free Blocks
When Should You Use This Feature?
Many users will prefer visualizing and creating landing page designs in Figma rather than writing code and waiting to see the output frequently. This feature is built specifically for that workflow. You can design your landing pages in Figma by combining different Pro/Free Blocks in various permutations and combinations. Once your design is ready, the /ftc command instantly identifies all the Pro/Free Blocks you used and installs them into your codebase - no manual coding required.
- Designers who build landing pages by composing Pro/Free Blocks in Figma
- Teams who prefer visual design before development
- Quick prototyping and iteration on landing page layouts
- Converting Figma mockups with block combinations into production code
How It Works
- Design your landing page in Figma using Pro/Free Blocks instances from shadcn/studio
- The Figma MCP reads your design and identifies all Pro/Free Blocks used
- The shadcn/studio MCP matches and installs the exact blocks using CLI commands
- You get production-ready code with all blocks installed in your project
- Customize the content and styling in your code as needed
Important: When creating your landing page design in Figma, you must keep the original frame names of Pro/Free Blocks exactly as they are. Do not rename blocks instances like "free-blocks/marketing-ui/hero-section/hero-section-01" to custom names like "My Hero Section".
Why this matters:
- The AI identifies blocks by parsing their frame names for block installation
- Renamed frames cannot be matched with blocks in the shadcn/studio library
- Installation will fail or install wrong blocks if frame names are modified
What This Feature Installs
This feature installs Pro/Free Blocks and applies minor customizations. Small changes like text content updates and color modifications from your Figma design will be reflected in the generated code. However, the AI may occasionally miss some customizations due to hallucinations - in such cases, you'll need to apply those manually.
What gets transferred:
- ✅ Base Pro/Free Blocks and components
- ✅ Text content changes (when AI correctly processes them)
- ✅ Color and minor styling modifications
- ✅ Simple property changes
What does NOT get transferred:
- ❌ Layout and structural changes
- ❌ Complex component rearrangements
- ❌ Added or removed sections/elements
- ❌ Major design overhauls
Need complex layout changes? Use the Custom Figma to Code using Figma MCP Server for pixel-perfect implementation with full layout control.
Use This Feature When:
- Building landing pages with Pro/Free Blocks combinations
- Pro/Free Blocks instances in Figma
- Need quick block installation for rapid prototyping
- Comfortable customizing content in code afterwards
Don't Use This When:
- You heavily customized Pro/Free Blocks in Figma
- Need pixel-perfect implementation of custom designs
- Creating completely custom components
- Your design doesn't use Pro/Free Block instances
Prerequisites for Figma to Code Feature
Before using the /ftc command, ensure you have:
- AI-powered IDE (VS Code with Copilot, Cursor, or Windsurf)
- Next.js or React project with shadcn/ui initialized — Setup Guide
- Figma Desktop App with MCP enabled — Install Figma MCP
- shadcn/studio MCP Server installed — Installation Guide
If you haven't installed the required MCP servers yet, follow these guides:
Project Configuration
To use Figma images in your Next.js project, you need to configure the image loader:
Update your next.config.ts
This configuration allows your Next.js app to load images from the Figma MCP server running on localhost port 3845.
How to Use Figma to Code Feature
Method 1: Select Frame in Figma (Real-Time Sync)
Prepare Your Figma Design
- Open your landing page design in Figma Desktop App
- Use Pro/Free Blocks instances (not detached copies)
- Keep original frame names: "pro-blocks/marketing-ui/hero-section/hero-section-02" and do not rename or modify block frame names
Select Your Frame
Click the top-level frame containing your landing page (you'll see a blue outline). Select the parent frame, not individual layers.
Open Your AI IDE & Write Prompt
Open your AI-powered IDE (ensure both MCPs are active) and use a simple prompt:
Example Prompt
/ftc generate code for the selected figma frame using shadcn/studio blocks AI Installs the Blocks
The AI extracts Pro/Free Blocks from your Figma design, matches them with the shadcn/studio library, and installs all blocks automatically via shadcn CLI.
Customize in Code
Blocks are now in your project. Customize content, styling, and functionality as needed in your code editor.
After the AI installs blocks, you may see linting errors in the generated code. This is normal and happens due to formatting inconsistencies or missing imports.
Simple fix: Just ask your AI assistant to "Fix the linting errors" and it will automatically clean up the code, adjust formatting, and resolve any import issues.
After the AI installs blocks, you may notice that some customizations you made in Figma (text content, colors, or minor styling changes) are not reflected in the generated code. This happens because when there are many blocks in the landing page, the AI may hallucinate or forget to update specific sections.
Simple fix: Just ask your AI assistant: "You forgot to update the content or styling in the feature block and FAQ block. Kindly cross-check and update them." The AI will then review those specific blocks and apply the missing changes.
Best Practices for Figma to Code
1Use Component Instances
Always use Pro/Free Blocks as component instances in Figma (not detached copies). This ensures the AI can correctly identify and match them with the shadcn/studio.
2Keep Original Frame Names
Never rename Pro/Free Blocks instances in Figma. Keep names like "pro-blocks/marketing-ui/hero-section/hero-section-02" exactly as they are. The AI uses these names to match blocks accurately.
3Design Then Customize
Design your landing page with base Pro/Free Blocks in Figma, install them via the /ftc command, then customize content and styling in your code editor. This workflow gives you the best of both visual design and code flexibility.
4Use Version Control
Always commit/stage your code before running bulk block installations so you can easily revert if needed. This is especially important when installing multiple blocks at once.
Troubleshooting Figma to Code (/ftc)
Tips & Best Practices
To get the most out of shadcn-studio MCP Server, keep these tips in mind:
1Use Clear and Specific Prompts
The more specific and clear your prompts are, the better the output will be. Always be precise with your requests to get the best results.
2Always Enable Agent Mode in your IDE
Ensure that Agent Mode is turned on while working with the shadcn-studio MCP Server to enhance performance and functionality.
3Use Claude Sonnet 3.5 or or Higher Models
For optimal results, always use Claude Sonnet 3.5 or higher LLM models. This ensures more accurate and creative UI generation.
4Generate One Block at a Time
Focus on generating one block at a time to maintain clarity and precision in your design. Instead of generating multiple blocks in one request, break them down into individual commands to have better control over each section.
Example:
Instead of this:
/cui Create the Pricing, Testimonials and Call to Action sections for my SaaS landing page.Use three separate commands:
/cui Create the Pricing section for my SaaS landing page which has animated pricing numbers/cui Create the Testimonials section for my SaaS landing page./cui Create the Call to Action section for my SaaS landing page.This will give you the flexibility to customize each block individually and ensure they fit perfectly into your overall design.
5Start Fresh for Each Component
For a smoother workflow, always create a new chat window for each new block or component. This helps avoid context confusion.
6Iterate and Refine
Don't hesitate to iterate on your designs. Use the /rui command to refine and update existing blocks as needed.
7Generate a Complete Landing Page
If you are planning to generate a complete landing page in one attempt, we recommend using the /cui command.
You can also mention the specific blocks you want to include in your landing page, and the MCP Server will generate it for you.
Example:
/cui Create a landing page for my SaaS. Use hero section like Hero 2, Use feature section like Features 8, Use testimonial section like Testimonials 1, Use call to action section like Call to Action 3, Use Pricing section like Pricing 5, Use Teams section like Teams 1./iui (Pro user only) command is not recommended for this task as it takes much more time to generate a complete landing page and you may not get the desired results. If you want to use /iui (Pro user only) command, we recommend you to use it for each section of the landing page separately as described in point 4 above.