Server facts
Shadcn UI v4 MCP Server
Project
- Author
- Jpisnice
- License
- MIT
- Category
- Developer Tools
Tech
- Runtime / language
- nodeTypeScript
- Transports
- stdio
- Remote available
- No
- Authentication
- Not specified
Activity
- GitHub stars
- 3,059
- Last commit
- Data as of
Tags
- Component Reference
- Framework Selection
- Shadcn Ui
- Typescript
- Ui Blocks
Overview
Choosing the implementation is part of using this server, not a detail to resolve after retrieving code. React is the default framework, with Vue, React Native, and Svelte available as alternatives backed by their respective implementations. For React, users can also select between Base UI and the default Radix primitives. That primitive-library choice is explicitly limited to React. The server then supplies reference material at different scales: component implementations and usage examples for focused work, or larger blocks for interfaces such as calendars and dashboards. Metadata includes dependency and configuration details, while repository browsing exposes the directory layout. The structured input additionally identifies three TweakCN operations for discovering, inspecting, and applying themes.
GitHub requests are cached and rate limits are handled by the integration. The README contrasts a token-free allowance of 60 hourly requests with 5,000 when using a token, making authentication useful even though it is optional. Local CLI use defaults to stdio. Other deployment choices include an SSE listener for multiple clients and a dual mode combining transports, plus Docker examples. Claude Desktop has a packaged MCPB installation route as another option. Source-build instructions specify Node.js 18 or above with npm or pnpm. Configuration settings expose network binding, CORS origins, and the SSE port, so a network deployment has more choices to review than the minimal local npx launch.
Install & configure
Requirements
- Node.js version 18 or above in the source-build prerequisites
- npm tooling for npx; npm or pnpm for source builds
- Client with MCP support
npx @jpisnice/shadcn-ui-mcp-serverThe basic npx command appears directly in the README. The GitHub environment entry is optional and documented separately. Initial defaults are React with Radix and stdio. Use --framework for another implementation; React can select Base UI with --ui-library base. Network examples use SSE or dual mode.
Examples are translated from the published configuration. Supply your own credentials and verify requirements in the upstream README. Remote connectors are shown only where a supported configuration format is known.
Config file · macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
Use Settings → Developer → Edit Config when available. Do not assume a Linux configuration path; check the client documentation for your platform. Remote servers use the app’s connector flow when supported, not the local stdio file shown here. Merge this example with existing settings; do not overwrite unrelated servers.
{
"mcpServers": {
"shadcn-ui-mcp-unofficial": {
"command": "npx",
"args": [
"@jpisnice/shadcn-ui-mcp-server"
],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "<optional GitHub credential for a higher request allowance>"
}
}
}
}Config file · Project: .cursor/mcp.json
User: ~/.cursor/mcp.json
The project path is relative to the workspace root. The tilde denotes your user home directory. Use Cursor’s MCP settings to confirm which configuration and scope your installed version is reading. Merge this example with existing settings; do not overwrite unrelated servers.
{
"mcpServers": {
"shadcn-ui-mcp-unofficial": {
"command": "npx",
"args": [
"@jpisnice/shadcn-ui-mcp-server"
],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "<optional GitHub credential for a higher request allowance>"
}
}
}
}Config file · Workspace: .vscode/mcp.json
For user scope, use the “MCP: Open User Configuration” command if available. Do not guess a user configuration path across operating systems, profiles, containers, or remote workspaces; check the client documentation. Merge this example with existing settings; do not overwrite unrelated servers.
{
"servers": {
"shadcn-ui-mcp-unofficial": {
"type": "stdio",
"command": "npx",
"args": [
"@jpisnice/shadcn-ui-mcp-server"
],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "<optional GitHub credential for a higher request allowance>"
}
}
}
}Config file · macOS/Linux: ~/.codeium/windsurf/mcp_config.json
Windows: %USERPROFILE%\.codeium\windsurf\mcp_config.json
Open the MCP configuration through Windsurf’s settings when possible to confirm the active file. Paths can differ in managed or future releases; check the client documentation if this location is not present. Merge this example with existing settings; do not overwrite unrelated servers.
{
"mcpServers": {
"shadcn-ui-mcp-unofficial": {
"command": "npx",
"args": [
"@jpisnice/shadcn-ui-mcp-server"
],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "<optional GitHub credential for a higher request allowance>"
}
}
}
}Config file · Project scope: .mcp.json at the repository root
The project file uses mcpServers. For user scope, use claude mcp add --scope user rather than assuming .mcp.json in your home directory is the user configuration. Check the client documentation for managed settings and storage details. Merge this example with existing settings; do not overwrite unrelated servers.
{
"mcpServers": {
"shadcn-ui-mcp-unofficial": {
"type": "stdio",
"command": "npx",
"args": [
"@jpisnice/shadcn-ui-mcp-server"
],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "<optional GitHub credential for a higher request allowance>"
}
}
}
}Examples are translated from the published configuration. Supply your own credentials and verify requirements in the upstream README. Remote connectors are shown only where a supported configuration format is known.
Tools
Source: repository tool metadata. Tool descriptions are a documented snapshot, not a live capability check.
| Tool | What it does |
|---|---|
| list_blocks | Browse the block inventory by category. |
| get_block | Fetch the implementation of a chosen UI block. |
| list_components | Browse the available component inventory. |
| get_component_metadata | Look up a component's descriptive, dependency, and configuration information. |
| get_component_demo | Fetch usage-example code for the selected component. |
| get_component | Fetch the selected component's implementation source. |
| get_directory_structure | Inspect how directories are arranged in the source repository. |
| list_themes | Browse the available TweakCN preset choices. |
| get_theme | Inspect the details behind one TweakCN preset. |
| apply_theme | Use a chosen TweakCN preset to update the project's theme. |
Names, permissions, and defaults can change. Check the current upstream documentation before granting access.
Use cases
- Resolve a component's dependencies and usage pattern before generating integration code.
- Retrieve a larger UI block instead of assembling every screen element from isolated snippets.
- Choose code for the project's framework and, for React, its primitive library.
- Inspect a TweakCN preset before asking the supplied theme operation to apply it.
Strengths
- Retrieval spans individual components, examples, metadata, and larger interface blocks.
- Framework and React primitive choices are explicit configuration decisions.
- Offers local execution, shared SSE access, and a packaged desktop installation.
Limitations
- Omitting a GitHub token leaves the lower documented request allowance.
- Base UI is not an alternative for the non-React framework modes.
Frequently asked questions
Independent listing, not an affiliation or security review. Grant the least access needed and verify the upstream instructions before running code.
