A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation,compaitable with react,svelte 5,vue & React Native
Connect Shadcn UI to Claude, Cursor or any other MCP client and it stops being a tab you switch to. A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation,compaitable with react,svelte 5,vue & React Native. The shadcn ui mcp server is what makes that connection.
A Model Context Protocol (MCP) server that provides AI assistants with comprehensive access to shadcn/ui v4 components, blocks, demos, and metadata. Seamlessly retrieve React, Svelte, Vue, and React Native implementations for your AI-powered development workflow.
The toolset is worth reading before you wire it up, because it tells you what the integration is really for:
Prerequisites — The Prerequisites tool exposed by this serverConfiguration is passed through the environment: GITHUB_PERSONAL_ACCESS_TOKEN, YOUR_TOKEN. Treat anything key-shaped as a real credential — scope it to the minimum the server needs, and rotate it if it ever lands in a shared config.
Installation goes through your MCP client rather than a global install: point it at @jpisnice/shadcn-ui-mcp-server on npm and it is fetched when the client starts. The copy-paste blocks for Claude Desktop, Claude Code and Cursor are further down this page.
This sits in the developer tooling group, where several servers overlap in what they claim to do but differ sharply once you actually set them up. Shadcn UI's toolset — Prerequisites — is a fair guide to whether it matches your workflow. It is maintained by Jpisnice; worth a glance at recent repository activity before you build anything load-bearing on it.
This entry was verified against Shadcn UI's own documentation before publication; SyncDev keeps the directory reviewed rather than auto-generated.
| Tool | What it does |
|---|---|
| Prerequisites | The Prerequisites tool exposed by this server. |
{
"mcpServers": {
"shadcn-ui-mcp-unofficial": {
"command": "npx",
"args": ["-y", "@jpisnice/shadcn-ui-mcp-server"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "your-value",
"YOUR_TOKEN": "your-value"
}
}
}
}Add to claude_desktop_config.json, then restart Claude Desktop.
| Variable | Description | Required |
|---|---|---|
| GITHUB_PERSONAL_ACCESS_TOKEN | Credential the server authenticates with. | Yes |
| YOUR_TOKEN | Credential the server authenticates with. | Yes |
Kill hallucinated APIs — version-accurate, up-to-date library documentation injected straight into context.
Microsoft's official browser automation server — drive a real browser through the accessibility tree, no screenshots needed.
GitHub's official server — repos, issues, pull requests, Actions and code security, straight from your assistant.
Issue tracking at the speed of conversation — Linear's official hosted server with OAuth and zero install.
Local repository surgery — status, diffs, commits, branches and history for any repo on disk.
Timezone sanity for AI — current time anywhere and correct conversions, without the model doing date math.