Shadcn UI MCP Server

Shadcn/ui v4 component metadata and source code access for AI development environments.

Data last scanned today · Reviewed yesterday

50★ 2,872TypeScriptMIT

Overview

This server bridges the gap between your AI assistant and the shadcn/ui v4 ecosystem. It allows models to programmatically browse components, blocks, and demos across multiple frameworks, including React, Svelte, Vue, and React Native. By exposing metadata such as dependencies and usage patterns, it helps developers quickly scaffold UI elements directly within their coding workflow. The server supports SSE transport for multi-client setups and provides containerized deployment options via Docker. It includes intelligent rate limit handling for GitHub API interactions and allows users to specify alternative UI libraries like Base UI for React projects.

Our verdict

With a security score of 35/100, this tool is categorized as high-risk. The primary security concern is the total lack of an authentication method, meaning any local configuration access grants full use of the server. Additionally, the server lacks a read-only mode, which could present unexpected behavior in sensitive environments. Given these risks, this tool is best suited for controlled development environments where users are fully aware of its open configuration, rather than in team or shared production systems.

Supports React, Svelte, Vue, and React Native
Provides direct access to shadcn/ui v4 source code
Maintains low surface area with only 9 dependencies
Includes built-in Docker support for deployment

High security risk due to lack of authentication
Community-maintained rather than official vendor software
No read-only mode restricts permission granularity

Setup

Claude Desktop

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

Paste into ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows), then restart Claude Desktop. Some servers require API keys or tokens as environment variables — check the project's README and add an "env" object if needed.

No read-only mode — running this grants full read/write access.
No built-in authentication — anyone with access to this config can invoke every tool it exposes.

Compatibility

Client	Local	Docker	Remote	Read-only
Claude Desktop
Cursor
VS Code
Windsurf
ChatGPT

Frequently asked questions

›How can I increase the GitHub API rate limit for this server?

You can increase the limit from 60 requests per hour to 5,000 by providing a GitHub personal access token using the --github-api-key flag or the GITHUB_PERSONAL_ACCESS_TOKEN environment variable.

›Can I use this server with frameworks other than React?

Yes, you can specify the framework by using the --framework flag, which supports 'svelte', 'vue', and 'react-native' in addition to the default 'react'.

›Does the server support different UI libraries for React?

Yes, for React you can choose between 'radix' (the default) and 'base' as your UI library using the --ui-library flag or the UI_LIBRARY environment variable.

›How do I deploy this server for multiple clients?

You can run the server using the Server-Sent Events (SSE) transport mode by setting the --mode flag to 'sse' and specifying a port, or by using the provided Docker Compose configuration.

›What is the recommended way to install this for Claude Desktop?

You can download the .mcpb file from the project's releases page and double-click it to trigger an automatic installation in Claude Desktop.