shadcn-ui

The Shadcn UI MCP Server provides a set of tools to manage shadcn/ui components and blocks through the Model Control Protocol. You can list available components, fetch documentation for a specific component, install components with support for multiple package managers (npm, pnpm, yarn, bun), and similarly manage blocks. The server automatically detects your preferred package manager and executes install commands accordingly, simplifying integration into your development workflow. To interact with the server, run it via npx as shown in the configuration, then use your MCP client to issue tool commands like list-components, get-component-docs, install-component, list-blocks, get-block-docs, and install-blocks. These tools help you discover, learn about, and install UI blocks and components for rapid prototyping and consistent UI assembly.

Prerequisites:

• Node.js v18 or higher
• npm or a compatible package manager (npm, pnpm, yarn, bun)

Installation steps:

1. Ensure Node.js is installed and accessible in your PATH. Verify with: node -v npm -v

2. Install and run the MCP server via npx (as shown in the config): npx @heilgar/shadcn-ui-mcp-server

   If you prefer to pin a specific version, specify it in the command: npx @heilgar/shadcn-ui-mcp-server@<version>

3. Optional: Integrate with IDE/configurations (Claude Desktop, Windsurf, Cursor) by updating the respective config files with the following: { "mcpServers": { "shadcn-ui-server": { "command": "npx", "args": ["@heilgar/shadcn-ui-mcp-server"] } } }

4. To build locally (if you are contributing to the MCP server itself): npm install npm run build

5. For development debugging, you can run the inspector (if you have the MCP Inspector tool): npm run inspector

Prerequisites recap: ensure Node.js v18+, have npm or another PM installed, and access to the internet to pull the MCP server package via npx.

Tips and notes:

• The server supports multiple package managers for installs (npm, pnpm, yarn, bun); it will detect and use the user's preferred PM when you issue install commands through MCP tools.
• If you encounter issues with npx caching or network, try clearing npm/yarn/pnpm caches or running with a specified version tag.
• The MCP Inspector is recommended for debugging MCP communications, tool calls, and real-time logs.
• You can configure the server name in your client config as shadcn-ui-server to align with the examples in Claude Desktop, Windsurf, and Cursor configurations.
• Ensure your environment has network access to fetch @heilgar/shadcn-ui-mcp-server and its dependencies during installation.