shadcn/ui MCP

Real shadcn/ui component source, demos and blocks, so the model stops guessing.

Started in our test
★ 3.1K GitHub stars
2K downloads a week
Last commit 3 Oct 2026

At a glance

Models often write shadcn/ui components from memory and get the props or imports slightly wrong. This server, by the GitHub user Jpisnice, fetches the real thing from GitHub: a component's current source, its demo, its metadata and dependencies, and whole blocks such as dashboards, login pages and calendars. It can also list and apply TweakCN colour themes. It is a community project, not one run by shadcn.

It reads from the React registry by default and can switch to the Svelte, Vue or React Native ports, or to the Base UI flavour of the React components. Everything comes from GitHub's API, which allows 60 requests an hour without a token, so add a free token if you use it a lot.

Made by: Jpisnice (community project, not affiliated with shadcn)
Licence: MIT
Latest version: 3.0.0 (3 Oct 2026)
npm package: @jpisnice/shadcn-ui-mcp-server
GitHub stars: 3.1K
Downloads: 2K a week
Last commit: 3 Oct 2026
Tools: 10
Runs on: Your computer

Our check: We ran this exact config on 27 Oct 2026: it started and answered with 10 tools.

What's in the pod: its tools

We found 10 tools when we started it on 27 Oct 2026. 9 only read. The rest can change things, so keep your app's "ask before each tool call" setting on for them.

Changes things1 tool · Can create, edit, send or delete.

Tool	What it is for
`apply_theme`	Applies a TweakCN theme preset to your project's CSS, with a dry-run option.

Only reads9 tools · Looks things up and changes nothing.

Tool	What it is for
`get_block`	Returns the source of a block such as dashboard-01 or login-02, with its components if asked.
`get_component`	Returns the current source of one shadcn/ui component.
`get_component_demo`	Returns the official example of a component in use.
`get_component_metadata`	Returns a component's description and dependencies.
`get_directory_structure`	Browses the folder tree of the shadcn/ui repository.
`get_theme`	Returns the colours and settings of one theme.
`list_blocks`	Lists the available blocks by category.
`list_components`	Lists every component in the chosen registry.
`list_themes`	Lists the TweakCN theme presets.

Grouped and described by us. The README on GitHub lists the inputs each tool takes.

How clearly it describes its tools to your assistant

Tools with a description: 10 of 10
Say if they change things: 10 of 10
Context it takes, at least: ~400 tokens

Every tool says whether it only reads or can change things, so a client can ask before the risky ones.

From the tool list it sent us. The token figure counts names, descriptions and input names; the full schemas your client loads add more.

Set it up

Pick your app for the exact snippet and where it goes.

Where it goes: claude_desktop_config.json (Settings → Developer → Edit Config)

Claude Desktop

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

Where it goes: Your terminal, in the project folder

Claude Code

claude mcp add-json shadcn-ui '{"command":"npx","args":["-y","@jpisnice/shadcn-ui-mcp-server"]}'

Where it goes: ~/.cursor/mcp.json, or .cursor/mcp.json in a project

Cursor

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

Where it goes: .vscode/mcp.json in your project

VS Code

{
  "servers": {
    "shadcn-ui": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  }
}

Where it goes: ~/.codeium/windsurf/mcp_config.json

Windsurf

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

Add "--github-api-key", "ghp_..." to the args (or GITHUB_PERSONAL_ACCESS_TOKEN in env) to raise the rate limit. Use "--framework", "svelte", "vue" or "react-native" for the other ports, and "--ui-library", "base" for Base UI.

New to this? See the setup guides for Claude Code, Cursor, Claude Desktop and ChatGPT.

Settings

Names are exactly as the project spells them. Required ones are marked.

Setting	What it does
`--github-api-key`Command line flag	A GitHub token, which raises the GitHub rate limit from 60 to 5,000 requests an hour. It needs no scopes.`--github-api-key ghp_...`
`GITHUB_PERSONAL_ACCESS_TOKEN`Environment variable	The same token, set in env instead of the args.
`--framework`Command line flag	Which port to read: react (the default), svelte, vue or react-native.`--framework svelte`
`--ui-library`Command line flag	For React, read the Base UI versions instead of Radix. Also UI_LIBRARY in env.`--ui-library base`
`--mode`Command line flag	Run over HTTP at /mcp (http) or both stdio and HTTP (dual). The default is stdio.`--mode http --port 7423`

What it can touch

It can read

Public shadcn/ui, shadcn-svelte, shadcn-vue and react-native-reusables source on GitHub
TweakCN theme presets

It can change

Your project's theme CSS, when apply_theme runs without dryRun

Safer setup: Everything else is read-only. Ask for a dry run before letting it apply a theme.

Before you start

Node.js 20 or newer
Optional: a GitHub token, for 5,000 requests an hour instead of 60

If it does not work

Calls fail after a while with a rate limit error: GitHub allows 60 unauthenticated requests an hour. Add a token with --github-api-key or GITHUB_PERSONAL_ACCESS_TOKEN.
Components come back in the wrong framework: Pass --framework with svelte, vue or react-native. Each server instance reads one framework.
Claude Desktop cannot find npx: Use the full path to npx in the command, or install the .mcpb bundle from the project's releases.

Peas in a pod: similar servers

How shadcn/ui MCP lines up against other developer tools servers on the shelf.

Server	Tools	Runs on	Licence	Stars
shadcn/ui MCP	10	Your computer	MIT	3.1K
jCodeMunch	6	Your computer	LicenseRef-jCodeMunch-Dual-Use-1	2.8K
iOS Simulator MCP	17	Your computer	MIT	2.2K
Desktop Commander	25	Your computer	MIT	10.1K
Serena	3	Your computer	–	30.7K

Questions

Is this the official shadcn MCP server?

No. shadcn ships its own MCP server in the shadcn CLI for working with registries. This community server focuses on component source, demos and blocks across four frameworks.

Does it need a GitHub account?

No, but a free token makes it far less likely to hit GitHub's rate limit.

Does it install components into my project?

No. It hands the model the source; the model or the shadcn CLI writes the files.

What does it cost?

Nothing. It is MIT licensed and reads public GitHub data.

Full docs on GitHubJpisnice/shadcn-ui-mcp-unofficial

Something wrong on this page? Tell us.