Shadcn UI MCP Server

@Jpisnice

About Shadcn UI MCP Server

A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation,compaitable with react,svelte 5,vue & React Native

#typescript #ui #ai #mcp #ts #webdev #shadcn-ui #modelcontextprotocol

Config

Add this server to your MCP-compatible client using the configuration below.

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

Tools

Get the source code for a specific shadcn/ui v4 component

Get demo code illustrating how a shadcn/ui v4 component should be used

Get all available shadcn/ui v4 components

Get metadata for a specific shadcn/ui v4 component

Get the directory structure of the shadcn-ui v4 repository

Get source code for a specific shadcn/ui v4 block (e.g., calendar-01, dashboard-01)

Get all available shadcn/ui v4 blocks with categorization

Apply a TweakCN theme preset to the project

List available tweakcn themes

Get details of a specific tweakcn theme

Overview

What is Shadcn UI MCP Server?

Shadcn UI MCP Server is a Model Context Protocol (MCP) server that gives AI assistants comprehensive access to shadcn/ui v4 components, blocks, demos, and metadata. It supports React, Svelte, Vue, and React Native implementations, making it suitable for developers building UIs with AI-powered workflows.

How to use Shadcn UI MCP Server?

Run the server with npx @jpisnice/shadcn-ui-mcp-server (optionally with --github-api-key for higher rate limits). Switch frameworks via --framework svelte (or vue, react-native). Use --mode sse for HTTP-based multi-client support. Integrate with Claude Desktop via a one-click .mcpb file or with Claude Code using claude mcp add. Configuration uses environment variables like GITHUB_PERSONAL_ACCESS_TOKEN and UI_LIBRARY.

Key features of Shadcn UI MCP Server

Multi‑framework support (React, Svelte, Vue, React Native)
Latest shadcn/ui v4 TypeScript source code
Component demos with usage patterns
Complete block implementations (dashboards, calendars, forms)
Metadata access (dependencies, descriptions, configuration)
SSE transport and Docker Compose for production deployments

Use cases of Shadcn UI MCP Server

AI‑powered UI development with shadcn/ui components
Multi‑client deployments using SSE transport
Production environments with Docker Compose health checks
Component discovery and comparison across frameworks
Rapid prototyping with pre‑built blocks and code generation

FAQ from Shadcn UI MCP Server

What frameworks are supported?

React (default), Svelte, Vue, and React Native. Switch with the --framework flag.

How do I get a GitHub token?

Generate a token at github.com/settings/tokens (no scopes needed). Use it with --github-api-key or the GITHUB_PERSONAL_ACCESS_TOKEN environment variable.

What transport modes are available?

stdio (default) for CLI, sse for HTTP, and dual for both simultaneously.

Can I run this in production with Docker?

Yes. The server includes a Docker Compose file with health checks. Run docker-compose up -d and expose port 7423.

What is the default UI library for React?

Radix UI is the default. Use --ui-library base to switch to Base UI (React only).

Frequently asked questions

What frameworks are supported?

React (default), Svelte, Vue, and React Native. Switch with the `--framework` flag.

How do I get a GitHub token?

Generate a token at [github.com/settings/tokens](https://github.com/settings/tokens) (no scopes needed). Use it with `--github-api-key` or the `GITHUB_PERSONAL_ACCESS_TOKEN` environment variable.