Skip to main content
MCP Server
Shadcn Ui avatar

Shadcn Ui

by @Jpisnice

Install with VS Code GitHub

A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation,compaitable with react,svelte 5,vue & React Native

Share
shadcn-uishadcn
2,782 stars TypeScript MIT Updated: 2026-06-04

Send to Your Agent

Copy this prompt and paste it into Claude, Cursor, or any MCP client to install instantly.

Install the Shadcn Ui MCP server for me.

Server: Shadcn Ui
Description: A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation,compaitable with react,svelte 5,vue & React Native
Install command: npx -y Jpisnice/shadcn-ui-mcp-server

Environment variables needed:
- MCP_TRANSPORT_MODE: Transport mode (stdio|sse|dual) (required)
- MCP_PORT: SSE server port (default: 7423 - SHADCN on keypad!) (required)
- MCP_HOST: Host binding (default: 0.0.0.0) (required)
- MCP_CORS_ORIGINS: CORS origins (comma-separated) (required)
- GITHUB_PERSONAL_ACCESS_TOKEN: GitHub API token (required)
- UI_LIBRARY: UI primitive library: `radix` (default) or `base` (React only) (required)

GitHub: https://github.com/Jpisnice/shadcn-ui-mcp-server

Please install this MCP server and confirm when ready.

Paste into any AI agent with MCP support — works with Claude Desktop, Cursor, Cline, and more.

Quick Install

Config file: ~/Library/Application Support/Claude/claude_desktop_config.json

  1. Open Claude Desktop app
  2. Go to Settings → Developer → Edit Config
  3. Paste the config below into the file
  4. Restart Claude Desktop
{
  "mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": [
        "-y",
        "Jpisnice/shadcn-ui-mcp-server"
      ],
      "env": {
        "MCP_TRANSPORT_MODE": "value",
        "MCP_PORT": "value",
        "MCP_HOST": "value",
        "MCP_CORS_ORIGINS": "value",
        "GITHUB_PERSONAL_ACCESS_TOKEN": "your-token-here",
        "UI_LIBRARY": "value"
      }
    }
  }
}

Add this to your ~/Library/Application Support/Claude/claude_desktop_config.json

Installation Methods

npx Run directly with npx
npx -y Jpisnice/shadcn-ui-mcp-server
npm Install via npm
npm install Jpisnice/shadcn-ui-mcp-server
docker Run with Docker
docker run Jpisnice/shadcn-ui-mcp-server

Tools (1)

execute

Execute shadcn-ui operations

Environment Variables

MCP_TRANSPORT_MODE Required

Transport mode (stdio|sse|dual)

Example: value
MCP_PORT Required

SSE server port (default: 7423 - SHADCN on keypad!)

Example: value
MCP_HOST Required

Host binding (default: 0.0.0.0)

Example: value
MCP_CORS_ORIGINS Required

CORS origins (comma-separated)

Example: value
GITHUB_PERSONAL_ACCESS_TOKEN Required

GitHub API token

Example: your-token-here
UI_LIBRARY Required

UI primitive library: `radix` (default) or `base` (React only)

Example: value

Compatibility

Claude Desktop
Cursor
Cline
VS Code
Devin (formerly Windsurf)

About

Shadcn UI v4 MCP Server

Overview

A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation,compaitable with react,svelte 5,vue & React Native

Environment Variables

  • MCP_TRANSPORT_MODE: Transport mode (stdio|sse|dual) (Required)
  • MCP_PORT: SSE server port (default: 7423 - SHADCN on keypad!) (Required)
  • MCP_HOST: Host binding (default: 0.0.0.0) (Required)
  • MCP_CORS_ORIGINS: CORS origins (comma-separated) (Required)
  • GITHUB_PERSONAL_ACCESS_TOKEN: GitHub API token (Required)
  • UI_LIBRARY: UI primitive library: radix (default) or base (React only) (Required)

Installation

NPX

npx -y Jpisnice/shadcn-ui-mcp-server

NPM

npm install Jpisnice/shadcn-ui-mcp-server

DOCKER

docker run Jpisnice/shadcn-ui-mcp-server

Related Resources

GitHub

MCP Server

Repository management, file operations, and GitHub API integration

DeepSeek Coder Architect

Prompt

Leverage DeepSeek Coder for complex software architecture, code generation, and technical problem-solving with advanced reasoning.

3D Printing Optimizer

Skill

Optimize 3D models for additive manufacturing considering orientation, supports, infill, and material properties.

Artificial Intelligence

Glossary

The broad field of creating machines that can perform tasks requiring human-like intelligence, such as reasoning, learning, and perception.

Filesystem

MCP Server

Secure file operations with configurable access controls

Compare LLM Pricing

This server works with Claude, GPT-4o, and other models. Compare API costs side-by-side to find the cheapest option for your workflow.

Browse Pricing Compare Models Cost Calculator