shadcn/ui

MCP server

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

Made forWeb design
What you needAn MCP client that accepts server configuration
Sources checked2026-11-02

Project links

mcp.soGitHub

How to use it

  1. Open the listing page and read the server's documentation.
  2. Copy the configuration or command into your MCP client.
  3. Restart the client and try one of the server's tools.

Copy setup details

Use these instructions in your own environment. Copying text here does not run it.

MCP configuration 1

Copy into a client that accepts mcpServers JSON. Other clients may use a different configuration format.

{
  "mcpServers": {
    "shadcn-ui-mcp-unofficial": {
      "command": "npx",
      "args": [
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  }
}

Claude Code command

Run on your own machine to add this server to Claude Code.

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

MCP configuration 2

Copy into a client that accepts mcpServers JSON. Other clients may use a different configuration format.

{
  "mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": [
        "@jpisnice/shadcn-ui-mcp-server"
      ],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your_token_here"
      }
    }
  }
}

MCP configuration 3

Copy into a client that accepts mcpServers JSON. Other clients may use a different configuration format.

{
  "mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": [
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "ghp_your_token_here"
      ]
    }
  }
}

Security checks

Automated checks, last run Nov 2, 2026. They can miss problems and do not guarantee a listing is safe. Read the source and what you are asked to run before you use it.