Log inSubmit server
Shadcn Ui MCP Server logo

Shadcn Ui MCP Server

by Jpisnice

Provides AI clients with shadcn/ui v4 components, blocks, demos, metadata, and multi-framework source access.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Shadcn Ui MCP Server

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "jpisnice-shadcn-ui-mcp-server": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ],
      "env": {
        "MCP_TRANSPORT_MODE": "YOUR_VALUE_HERE",
        "MCP_PORT": "YOUR_VALUE_HERE",
        "MCP_HOST": "YOUR_VALUE_HERE",
        "MCP_CORS_ORIGINS": "YOUR_VALUE_HERE",
        "GITHUB_PERSONAL_ACCESS_TOKEN": "YOUR_VALUE_HERE",
        "UI_LIBRARY": "YOUR_VALUE_HERE"
      }
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

Values are written into the snippet above so you can paste it as is. They never leave your browser.

Automated check passed— started and listed 10 tools correctly (1mo ago).

Overview

Jpisnice/shadcn-ui-mcp-server MCP server exposes shadcn/ui v4 components, blocks, demos, and metadata to AI assistants. It retrieves TypeScript implementations and related repository data through GitHub, with support for React, Svelte, Vue, and React Native. Use it when an agent needs to discover UI components, inspect example code, or generate interfaces based on shadcn implementations. It runs over stdio by default and also supports SSE and dual transport modes for multi-client deployments.

Use cases

  • Discover shadcn/ui components for AI-generated interfaces
  • Inspect demos before implementing a component
  • Compare UI implementations across supported frameworks
  • Browse complete blocks for dashboards and forms

Key features

  • React, Svelte, Vue, and React Native implementations
  • Component source, demos, blocks, and metadata
  • GitHub-backed retrieval with caching
  • stdio, SSE, and dual transport modes
  • Radix UI or Base UI selection for React
  • Docker and Docker Compose deployment support

Tools10

What Shadcn Ui MCP Server lets your agent do. Expand a tool for its parameters.

Verified live~652 tokens of context

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked Today

Recent health check succeeded.

31/31 checks healthy over the last 77d

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 9d ago via OSV.dev · @jpisnice/shadcn-ui-mcp-server (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars3.1kStargazers on the source repository.
npm downloads11kPackage downloads in the last 30 days.
Last commit24d agoMost recent push to the default branch.
Availability100%Our rolling endpoint + install checks that succeeded.
Install checkPassedOur sandbox started it and listed its tools.
Tools exposed10Callable tools this server registers over MCP.
Directory activity3 viewsConfig copies, upvotes, and views on AllMCPs.

How Shadcn Ui MCP Server works

What Jpisnice/shadcn-ui-mcp-server does

It covers the React shadcn/ui v4 implementation by default, along with Svelte, Vue, and React Native variants. For React, the server can use either Radix UI or Base UI primitives, with Radix as the default.

The available content includes component source code, demos, blocks, dependency information, descriptions, configuration details, and directory listings. Blocks include larger examples such as dashboards, calendars, and forms. This makes the server suitable for agents that need to inspect existing implementations before producing UI code or explaining how a component is structured.

How it works

The server integrates with GitHub to retrieve repository content. Caching is used to reduce repeated GitHub requests and handle rate-limit conditions.

Standard input/output is the default transport for local command-line use. SSE mode exposes the server through an HTTP endpoint and is intended for multiple concurrent connections. A dual mode can run both stdio and SSE. Docker and Docker Compose examples are provided for deployments that need a containerized SSE service, including a health endpoint on the documented port.

Framework and UI-library choices can be supplied as command-line options or environment variables. The supported framework values are React, Svelte, Vue, and React Native. The Base UI option applies only to React.

Setup and configuration

Run Jpisnice/shadcn-ui-mcp-server MCP server with Node.js 18 or newer using the published npm package and npx. A GitHub personal access token is optional, but recommended when the client will make enough requests to exceed the unauthenticated limit.

The documented environment variables control transport mode, port, host binding, CORS origins, GitHub authentication, and the React primitive library. The default SSE port is 7423, while the default transport is stdio. For a source build, install dependencies, run the project build script, and start the generated build/index.js entry point.

Claude Desktop can be configured through a downloadable .mcpb release file or through its MCP settings.

Tools and capabilities

  • Retrieve component source implementations.
  • Inspect component demos and usage patterns.
  • Browse blocks such as dashboards, calendars, and forms.
  • Read dependencies, descriptions, and configuration metadata.
  • Browse relevant repository directories.
  • Select React, Svelte, Vue, or React Native content.
  • Select Radix UI or Base UI for React.
  • Serve clients over stdio, SSE, or both.

Limitations and notes

Jpisnice/shadcn-ui-mcp-server MCP server depends on GitHub access for its repository data, so request limits matter for repeated or broad exploration. Authentication is not mandatory, but unauthenticated use has the lower documented request allowance.

SSE deployment requires starting the built server or using the supplied Docker examples; the npm command defaults to stdio. The material identifies Claude Desktop, Claude Code, Cursor, VS Code, and Continue.dev integration guidance, but it does not establish compatibility with every MCP client. The repository is MIT-licensed.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Shadcn Ui MCP Server

Run `npx -y @jpisnice/shadcn-ui-mcp-server`. Node.js 18 or newer is listed as a prerequisite.

Yes.

No. A token is optional, but it increases the documented GitHub request limit from 60 to 5,000 requests per hour.

It supports React, Svelte, Vue, and React Native. React also supports Radix UI or Base UI primitives.

Yes. SSE is supported alongside the default stdio mode, and a dual mode can run both transports.

Related MCP servers

All in Developer Tools All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewShadcn Ui MCP Server AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/jpisnice-shadcn-ui-mcp-server?style=directory)](https://allmcps.com/mcp/jpisnice-shadcn-ui-mcp-server)
HTML Embed
<a href="https://allmcps.com/mcp/jpisnice-shadcn-ui-mcp-server"><img src="https://allmcps.com/api/badge/jpisnice-shadcn-ui-mcp-server?style=directory" alt="Shadcn Ui MCP Server on AllMCPs" /></a>