Shadcn UI MCP Server

Shadcn UI v4 MCP Server

An MCP server that gives the agent shadcn/ui component source, demos and blocks for React, Svelte, Vue and React Native

jpisnice/shadcn-ui-mcp-serverAuthor:Janardhan Pollle

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add mcp/shadcn-ui-v4-mcp-server

Detects the agents on your machine, checks the risk and pins the version.

Other ways to install

Run in a terminal

claude mcp add --transport stdio --env 'GITHUB_API_KEY=<your GITHUB_API_KEY>' shadcn -- npx -y @jpisnice/shadcn-ui-mcp-server --github-api-key '<your GITHUB_API_KEY>'

Or add to the file .mcp.json, in the project

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "<your GITHUB_API_KEY>"
      ],
      "env": {
        "GITHUB_API_KEY": "<your GITHUB_API_KEY>"
      }
    }
  }
}

If the file already exists, add the server inside the mcpServers key.

Keys and settings

GITHUB_API_KEYsecret, required

Replace the values in angle brackets with your own. Keys never go into install links and are not stored by us.

Install in Cursor

The button opens the agent and offers to add the server. If nothing happens, copy the config below.

Add to the file ~/.cursor/mcp.json, for all projects

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "<your GITHUB_API_KEY>"
      ],
      "env": {
        "GITHUB_API_KEY": "<your GITHUB_API_KEY>"
      }
    }
  }
}

If the file already exists, add the server inside the mcpServers key. For a single project, put the same block into .cursor/mcp.json.

Keys and settings

GITHUB_API_KEYsecret, required

Replace the values in angle brackets with your own. Keys never go into install links and are not stored by us.

Install in VS Code

The button opens the agent and offers to add the server. If nothing happens, copy the config below.

Run in a terminal

code --add-mcp '{"name":"shadcn","type":"stdio","command":"npx","args":["-y","@jpisnice/shadcn-ui-mcp-server","--github-api-key","<your GITHUB_API_KEY>"],"env":{"GITHUB_API_KEY":"<your GITHUB_API_KEY>"}}'

Or add to the file .vscode/mcp.json, in the project

{
  "servers": {
    "shadcn": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "<your GITHUB_API_KEY>"
      ],
      "env": {
        "GITHUB_API_KEY": "<your GITHUB_API_KEY>"
      }
    }
  }
}

If the file already exists, add the server inside the servers key.

Keys and settings

GITHUB_API_KEYsecret, required

Replace the values in angle brackets with your own. Keys never go into install links and are not stored by us.

Run in a terminal

codex mcp add shadcn --env 'GITHUB_API_KEY=<your GITHUB_API_KEY>' -- npx -y @jpisnice/shadcn-ui-mcp-server --github-api-key '<your GITHUB_API_KEY>'

Or add to the file ~/.codex/config.toml, for all projects

[mcp_servers.shadcn]
command = "npx"
args = ["-y", "@jpisnice/shadcn-ui-mcp-server", "--github-api-key", "<your GITHUB_API_KEY>"]
env = { GITHUB_API_KEY = "<your GITHUB_API_KEY>" }

If the file already exists, append the block to the end.

Keys and settings

GITHUB_API_KEYsecret, required

Replace the values in angle brackets with your own. Keys never go into install links and are not stored by us.

Add to the file ~/.gemini/settings.json, for all projects

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "<your GITHUB_API_KEY>"
      ],
      "env": {
        "GITHUB_API_KEY": "<your GITHUB_API_KEY>"
      }
    }
  }
}

If the file already exists, add the server inside the mcpServers key.

Keys and settings

GITHUB_API_KEYsecret, required

Replace the values in angle brackets with your own. Keys never go into install links and are not stored by us.

Add to the file ~/.config/devin/mcp_config.json, for all projects

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "<your GITHUB_API_KEY>"
      ],
      "env": {
        "GITHUB_API_KEY": "<your GITHUB_API_KEY>"
      }
    }
  }
}

If the file already exists, add the server inside the mcpServers key. Legacy Cascade keeps the MCP config in ~/.codeium/windsurf/mcp_config.json.

Keys and settings

GITHUB_API_KEYsecret, required

Replace the values in angle brackets with your own. Keys never go into install links and are not stored by us.

Formerly Windsurf.

Add to the file cline_mcp_settings.json, for all projects

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "<your GITHUB_API_KEY>"
      ],
      "env": {
        "GITHUB_API_KEY": "<your GITHUB_API_KEY>"
      }
    }
  }
}

If the file already exists, add the server inside the mcpServers key. Open the settings file in Cline: MCP Servers tab, Configure MCP Servers.

Keys and settings

GITHUB_API_KEYsecret, required

Replace the values in angle brackets with your own. Keys never go into install links and are not stored by us.

Add to the file .roo/mcp.json, in the project

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "<your GITHUB_API_KEY>"
      ],
      "env": {
        "GITHUB_API_KEY": "<your GITHUB_API_KEY>"
      }
    }
  }
}

If the file already exists, add the server inside the mcpServers key.

Keys and settings

GITHUB_API_KEYsecret, required

Replace the values in angle brackets with your own. Keys never go into install links and are not stored by us.

A fork of Roo Code, same .roo folders.

Add to the file opencode.json, in the project

{
  "mcp": {
    "shadcn": {
      "type": "local",
      "command": [
        "npx",
        "-y",
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "<your GITHUB_API_KEY>"
      ],
      "environment": {
        "GITHUB_API_KEY": "<your GITHUB_API_KEY>"
      }
    }
  }
}

If the file already exists, add the server inside the mcp key.

Keys and settings

GITHUB_API_KEYsecret, required

Replace the values in angle brackets with your own. Keys never go into install links and are not stored by us.

Add to the file ~/.config/zed/settings.json, for all projects

{
  "context_servers": {
    "shadcn": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "<your GITHUB_API_KEY>"
      ],
      "env": {
        "GITHUB_API_KEY": "<your GITHUB_API_KEY>"
      }
    }
  }
}

If the file already exists, add the server inside the context_servers key.

Keys and settings

GITHUB_API_KEYsecret, required

Replace the values in angle brackets with your own. Keys never go into install links and are not stored by us.

Add to the file .codeassistant/mcp.json, in the project

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "<your GITHUB_API_KEY>"
      ],
      "env": {
        "GITHUB_API_KEY": "<your GITHUB_API_KEY>"
      }
    }
  }
}

If the file already exists, add the server inside the mcpServers key.

Keys and settings

GITHUB_API_KEYsecret, required

Replace the values in angle brackets with your own. Keys never go into install links and are not stored by us.

You will need: Node.js

Checked against the repository on Sep 25, 2026, commit 45d615f.

Text for your agent

Add the MCP server: claude mcp add shadcn -- npx -y @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_TOKEN. A GitHub token is optional but raises the request limit. For Svelte, Vue or React Native add the --framework flag.

Other ways from the author

claude mcp add shadcn -- npx -y @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_TOKEN

A GitHub token is optional, but without it the limit is about 60 requests per hour. The --framework flag switches the stack.

This is third-party code. Review the repository files before installing.

What it does

The server connects to the agent over MCP and exposes shadcn/ui v4 components: TypeScript source, usage demos, ready blocks for dashboards, forms and calendars, and metadata with dependencies. It reads from the shadcn repositories through the GitHub API, so the agent gets current versions instead of stale recollections. A framework flag selects the stack: React with Radix or Base primitives, Svelte, Vue or React Native. It provides tools to list components and blocks and to browse the repository structure. It runs over stdio for local use and over SSE for multiple clients at once, with a Docker image available.

Who it is for. For frontend developers and designers who build shadcn/ui interfaces with an agent.

Good fit when

The agent builds a shadcn/ui interface and needs exact component source
You need ready blocks: a dashboard, a form, a calendar
You work not only with React but also with Svelte, Vue or React Native

Not a fit when

The project does not use shadcn/ui
You need your own design system rather than shadcn components

Example request

Build a settings page with shadcn/ui: pull the form and switch components from the shadcn MCP

Limitations

The server reads components through the GitHub API. Without a token the limit is about 60 requests per hour; a personal GitHub token raises it to 5000. The server itself runs locally via npx or in Docker and needs Node.js 18 or newer. It returns source code, and the agent is what writes files into the project.

How to disable. Remove the server from your client's MCP configuration. In Claude Code: claude mcp remove shadcn.

MCP

Transport: stdio, sse
Authentication: API key

Environment variables
Environment variables
GITHUB_PERSONAL_ACCESS_TOKEN secret	A personal GitHub token. Optional, raises the GitHub API limit from 60 to 5000 requests per hour. Can also be passed via the --github-api-key flag.

Security check

Runs a local process via npx or Docker
Makes network calls to the GitHub API to fetch component source

README in short

The README describes an MCP server for shadcn/ui v4 that gives the agent component source, demos, blocks and metadata. It shows running via npx, installing as an npm package, building from source and an SSE mode with Docker Compose for multiple clients. It documents framework selection (React, Svelte, Vue, React Native), environment variables and getting a GitHub token to raise rate limits. It includes setup notes for Claude Code, Claude Desktop, Cursor, VS Code and Continue. MIT licensed.

FAQ

Do I need a GitHub token?

No. Without one you get about 60 requests per hour; a personal token raises the limit to 5000, which is enough for active work.

Which frameworks are supported?

React by default, plus Svelte, Vue and React Native. The stack is chosen with the --framework flag. For React you can switch from Radix to Base with --ui-library.

Next.js skills

Editors’ pick

Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server

PluginMedium riskNo VPN needed142.9K

shadcn/ui

Editors’ pick

Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules

SkillMedium riskNo VPN needed124.8K

Impeccable

Editors’ pick

A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells

SkillHigh risk72.1K

Vercel Agent Skills

Agent Skills

Editors’ pick

Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys

SkillMedium risk31.7K

Install

What it does

Good fit when

Not a fit when

Example request

Limitations

MCP

Security check

README in short

FAQ

Related

Next.js skills

shadcn/ui

Impeccable

Vercel Agent Skills