Shadcn UI

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

2.7k

GitHub Stars

typescript

Language

4 months ago

First Indexed

3 weeks ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

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

This MCP server provides AI assistants with broad access to shadcn/ui v4 components, blocks, demos, and metadata across multiple frameworks, enabling you to explore, integrate, and prototype UI patterns in your AI-powered workflows.

How to use

You use the server by running the MCP client locally or in a deployment and connecting your editor or AI assistant to fetch component data, blocks, and metadata for React, Svelte, Vue, and React Native implementations. Start with a basic run, optionally supply your GitHub token to increase request limits, and switch between frameworks to explore the corresponding implementations. The server supports multiple clients through SSE for production deployments.

How to install

Prerequisites: ensure you have Node.js version 18 or newer and either npm or pnpm installed.

Install or run via npx to start quickly.
If you need higher GitHub API rate limits, provide a personal access token when starting the server.
Choose a framework if you want to explore framework-specific implementations: React (default), Svelte, Vue, or React Native.

Configuration and usage notes

The server can be run in multiple transport modes for client connections. The default mode uses standard input/output (stdio). Server-Sent Events (SSE) mode enables multi-client connections for production deployments. You can also run both modes concurrently if needed.

Environment variables you may encounter include a GitHub personal access token for higher rate limits and a UI library selector for React when using the Base UI variant.

If you want to run in a production-like setting, consider using Docker Compose for containerized deployment and health monitoring.

Examples and practical tips

Start a quick session with default settings: run the MCP server and connect via your editor or Claude Code integration.
Switch frameworks to compare component sets across React, Svelte, Vue, and React Native.
Use a GitHub token to increase available requests per hour when exploring large component trees or metadata.

Troubleshooting and tips

If you encounter networking or token-related errors, verify your token value and ensure the server has access to reach GitHub APIs. For multi-client deployments with SSE, ensure your client connections are configured to listen to the SSE endpoint and that the server port is accessible in your environment.