Shadcn UI MCP Server

Community

Give AI assistants direct access to shadcn/ui v4 components, blocks, and demos

How to install ↓ Compare GitHub source repository ↗

Category: Dev Tools #38 of 438
Stars: ★ 3.1k Very popular
Transport: stdio (local process) · SSE
Runtime: Node.js 18+ · Docker
Credentials: Optional API key
License: MIT
Last commit: 18 days ago
Tools: 8

66FMRS · C

This server provides rich access to shadcn/ui components with multi-framework support and easy installation. However, it depends on GitHub API, and rate limits are the main bottleneck; configuring a token is recommended for a good experience.

Strongest · Maintenance 16/20 Weakest · Reliability 8/20

Reliability

8/20

Security and permissions

14/20

Maintenance

16/20

Documentation

15/20

Setup experience

13/20

Why each score

Reliability 8/20: Source code shows a clear entry point and structured build process. However, no test or CI evidence is provided, and actual tool behavior is not verified by execution, so points are deducted.
Security and permissions 14/20: GitHub token is handled as an optional parameter, and no real tokens appear in the README. Tools are mostly read-only with no destructive operations, but least-privilege and data-flow disclosure are not explicitly documented, so not full marks.
Maintenance 16/20: Repository is active with recent commits and releases, and has an MIT license. However, no explicit security response policy or consistent versioning governance is evident, so points are deducted.
Documentation 15/20: README and docs folder provide detailed guidance on installation, configuration, integration, and troubleshooting. However, some assumptions (like rate limits) are not explicit and no verifiable execution evidence is provided, so not full marks.
Setup experience 13/20: Clear npx installation steps and client config examples for Claude Desktop are provided. However, no CI or test evidence validates the install path, and manual token configuration is required, so not full marks.

Static review · not runListed 2026-08-07

Read the FMRS scoring method →

Fit and risk

What it can accessUses the network

Best for

Developers using shadcn/ui
Teams wanting AI assistants to generate shadcn/ui-style component code
Developers needing consistent UI across frameworks (React, Svelte, Vue, React Native)
Building AI-powered development tools or integrations

Not for

Users not using shadcn/ui
Users needing other UI libraries (e.g., Tailwind UI)
Offline environments (requires GitHub API access)
Scenarios requiring fully local operation without external API dependencies

Required permissions

GitHub API access (to fetch component and repository data)
Network access (for GitHub API and npm package downloads)
Read environment variables (e.g., GITHUB_PERSONAL_ACCESS_TOKEN)
Local filesystem operations (e.g., for build caches)

Risks and side effects

GitHub API rate limiting may cause service unavailability (60 requests/hour default, 5000/hour with token).
Supply chain risk from npm packages; verify package integrity.
SSE mode may expose the server on the network; configure CORS and access controls.
Component code may contain outdated or insecure patterns; review before use.

Setup

Before you start

Runtime：Node.js 18+ · Docker

GITHUB_PERSONAL_ACCESS_TOKEN optionalsecret GitHub personal access token (no scopes needed), generated at https://github.com/settings/tokens; raises the rate limit from 60 to 5000 requests/hour.

Other optional settings (5)

MCP_TRANSPORT_MODE optional Transport mode (stdio|sse|dual); defaults to stdio.

MCP_PORT optional SSE server port; defaults to 7423.

MCP_HOST optional Host binding address; defaults to 0.0.0.0.

MCP_CORS_ORIGINS optional Allowed CORS origins, comma-separated.

UI_LIBRARY optional UI primitive library: radix (default) or base, React only.

Obtain a GitHub personal access token (optional but recommended for higher rate limits).
Run the server using npx: npx @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_TOKEN.
Add the server to your client (e.g., Claude Desktop) configuration.

claude_desktop_config.json

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

Shown for Claude Desktop. Other clients may use a different file or key (VS Code uses "servers") — the configurator below converts it.

.vscode/mcp.json

{
  "servers": {
    "shadcn": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "YOUR_GITHUB_TOKEN"
      ]
    }
  }
}

Goes in your project's .vscode/mcp.json (VS Code uses a "servers" key).

Terminal

claude mcp add shadcn -- npx -y @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_GITHUB_TOKEN

Run it in a terminal; replace any <…> placeholders with your own values first.

Generate and validate client config

Check that it works

The client's tool list should show tools like get_component and list_components; asking it to "list all shadcn components" and getting a component list back confirms the connection works.

Troubleshooting

Verify GitHub token is valid and not expired.
Ensure network connectivity to GitHub API.
Check server logs for input/output errors.
Try using the `--framework` parameter to switch to the desired framework.
For SSE mode, check if the port is occupied and firewall allows access.

Things to try

Once connected, you can ask your AI assistant things like:

List all available shadcn/ui components
Show me the React source code for the button component
Get the full dashboard block implementation
Compare the button component's Svelte and Vue implementations

Tools 8

get_component read-only

Retrieve the full source code of a specific component.

list_components read-only

List all available shadcn/ui components for the current framework.

get_block read-only

Retrieve complete block implementations (e.g., dashboards, calendars, forms).

list_blocks read-only

List all available blocks.

get_demo read-only

Retrieve example implementations and usage patterns for a component.

list_demos read-only

List all available demos.

get_metadata read-only

Retrieve dependencies, descriptions, and configuration details for a component.

browse_directory read-only

Explore repository directory structures.

Use cases

AI-powered development: Let AI assistants build UIs with shadcn/ui.

Component discovery: Explore available components and their usage.

Multi-framework learning: Compare React, Svelte, Vue, and React Native implementations.

Rapid prototyping: Get complete block implementations for dashboards, forms, etc.

Code generation: Generate component code with proper dependencies.

Supported clients

Claude Desktop

Claude Code

VS CodePartial support

CursorPartial support

ContinuePartial support

Listed from the project's documentation, not tested by this site.

Overview

A Model Context Protocol (MCP) server that provides AI assistants with comprehensive access to shadcn/ui v4 components, blocks, demos, and metadata. Supports React, Svelte, Vue, and React Native implementations for AI-powered development workflows.

Similar servers

Context7 80 · B

Upstash's official server providing up-to-date third-party library docs for AI coding assistants

★ 63.3k · Tools 2 Compare with this →

NPM Sentinel MCP Server 79 · B

AI-powered NPM package analysis MCP server

★ 18 · Tools 19 Compare with this →

MartinLoop MCP Server 79 · B

An independent control layer that gives AI coding agents budgets, brakes, and receipts

★ 413 Compare with this →

GitHub MCP Server 76 · B

GitHub's official MCP server for managing repos, issues, PRs, and workflows via natural language

★ 33.7k · Tools 15 Compare with this →

Compare with other MCP servers

Source revision 30efb8a0bf8d Data synced 2026-10-19 Read the FMRS scoring method