--- title: "shadcn/ui MCP Server: Component Source, Demos and Blocks" url: "https://mcpshelf.co/servers/shadcn-ui" description: "A community server that hands an assistant shadcn/ui v4 component source, demos and blocks for React, Svelte, Vue or React Native. Setup and GitHub limits." updated: "2026-10-27" site: "MCP Shelf" --- # shadcn/ui MCP > Real shadcn/ui component source, demos and blocks, so the model stops guessing. ## 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) | | GitHub | https://github.com/Jpisnice/shadcn-ui-mcp-unofficial | | Licence | MIT | | npm package | [@jpisnice/shadcn-ui-mcp-server](https://www.npmjs.com/package/@jpisnice/shadcn-ui-mcp-server) 3.0.0 (3 Oct 2026) | | GitHub stars | 3.1K | | Downloads | 2K a week | | Last commit | 3 Oct 2026 | | Tools | 10 | | Runs on | Your computer | | Install check | Started in our test | | Category | [Developer tools](https://mcpshelf.co/categories/developer-tools) | **Our check:** We ran this exact config on 27 Oct 2026: it started and answered with 10 tools. ## Tools We listed 10 tools on 27 Oct 2026. 9 only read; the rest can change things or run commands. | Tool | Kind | What it is for | | --- | --- | --- | | `get_component` | reads | Returns the current source of one shadcn/ui component. | | `get_component_demo` | reads | Returns the official example of a component in use. | | `list_components` | reads | Lists every component in the chosen registry. | | `get_component_metadata` | reads | Returns a component's description and dependencies. | | `get_directory_structure` | reads | Browses the folder tree of the shadcn/ui repository. | | `get_block` | reads | Returns the source of a block such as dashboard-01 or login-02, with its components if asked. | | `list_blocks` | reads | Lists the available blocks by category. | | `apply_theme` | changes | Applies a TweakCN theme preset to your project's CSS, with a dry-run option. | | `list_themes` | reads | Lists the TweakCN theme presets. | | `get_theme` | reads | Returns the colours and settings of one theme. | ### How clearly it describes its tools 10 of 10 tools have a description and 10 of 10 say whether they change things. The tool list takes at least ~400 tokens of context. Every tool says whether it only reads or can change things, so a client can ask before the risky ones. ## Set it up ### Claude Desktop Where: claude_desktop_config.json (Settings → Developer → Edit Config) ```json { "mcpServers": { "shadcn-ui": { "command": "npx", "args": [ "-y", "@jpisnice/shadcn-ui-mcp-server" ] } } } ``` ### Claude Code Where: Your terminal, in the project folder ```bash claude mcp add-json shadcn-ui '{"command":"npx","args":["-y","@jpisnice/shadcn-ui-mcp-server"]}' ``` ### Cursor Where: ~/.cursor/mcp.json, or .cursor/mcp.json in a project ```json { "mcpServers": { "shadcn-ui": { "command": "npx", "args": [ "-y", "@jpisnice/shadcn-ui-mcp-server" ] } } } ``` ### VS Code Where: .vscode/mcp.json in your project ```json { "servers": { "shadcn-ui": { "type": "stdio", "command": "npx", "args": [ "-y", "@jpisnice/shadcn-ui-mcp-server" ] } } } ``` ### Windsurf Where: ~/.codeium/windsurf/mcp_config.json ```json { "mcpServers": { "shadcn-ui": { "command": "npx", "args": [ "-y", "@jpisnice/shadcn-ui-mcp-server" ] } } } ``` ### ChatGPT Where: Not supported ChatGPT only connects to remote servers by URL. This one runs on your computer, so use Claude, Cursor or VS Code. 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. ## Settings | Setting | Kind | Required | What it does | | --- | --- | --- | --- | | `--github-api-key` | flag | no | A GitHub token, which raises the GitHub rate limit from 60 to 5,000 requests an hour. It needs no scopes. Example: `--github-api-key ghp_...` | | `GITHUB_PERSONAL_ACCESS_TOKEN` | env | no | The same token, set in env instead of the args. | | `--framework` | flag | no | Which port to read: react (the default), svelte, vue or react-native. Example: `--framework svelte` | | `--ui-library` | flag | no | For React, read the Base UI versions instead of Radix. Also UI_LIBRARY in env. Example: `--ui-library base` | | `--mode` | flag | no | Run over HTTP at /mcp (http) or both stdio and HTTP (dual). The default is stdio. Example: `--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 ## Good for - Building screens from shadcn/ui components without made-up props - Pulling a ready-made block, such as a dashboard or sign-in page, into a project - Working with the Svelte, Vue or React Native versions of shadcn/ui ## 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. ## Similar servers | Server | Tools | Runs on | Stars | | --- | --- | --- | --- | | [jCodeMunch](https://mcpshelf.co/servers/jcodemunch) | 6 | Your computer | 2.8K | | [iOS Simulator MCP](https://mcpshelf.co/servers/ios-simulator) | 17 | Your computer | 2.2K | | [Grounded Docs (docs-mcp-server)](https://mcpshelf.co/servers/grounded-docs) | 12 | Your computer | 1.8K | | [MCP Server for WinDbg](https://mcpshelf.co/servers/windbg) | 12 | Your computer | 1.6K | ## 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 GitHub: https://github.com/Jpisnice/shadcn-ui-mcp-unofficial --- From [MCP Shelf](https://mcpshelf.co/): A short shelf of MCP servers that are worth installing. Index for agents: https://mcpshelf.co/llms.txt