Shadcn

Provides access to shadcn/ui components data, usage examples, and installation steps for MCP clients.

typescript

0

GitHub Stars

typescript

Language

6 months ago

First Indexed

3 months 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": {
    "krutikkkkkkkkk-shadcn-mcp-server": {
      "command": "npx",
      "args": [
        "shadcn-mcp-server"
      ]
    }
  }
}

You run a Model Context Protocol (MCP) server that helps AI assistants discover, install, and generate code for shadcn/ui components. It exposes practical actions like listing components, viewing details, generating usage examples, and providing installation steps, so your editor or AI can smoothly integrate shadcn components into your projects.

How to use

You connect an MCP client to the shadcn MCP Server to access component data, usage examples, and installation commands. Use simple prompts to guide the AI assistant, such as asking for available shadcn components, requesting usage examples, or generating installation steps for a desired component.

How to install

Choose a method that fits your workflow. You can run as a local server, use a web client, or install globally for quick access from anywhere.

# Option 1: Use with Claude Desktop (Recommended)
# Add to your Claude Desktop configuration
{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn-mcp-server"]
    }
  }
}

# Option 2: Clone and Run Locally
git clone https://github.com/krutikkkkkkkkk/shadcn-mcp-server.git
cd shadcn-mcp-server
npm install
npm run build
npm start

# Option 3: Use with Any MCP Client
npm install -g shadcn-mcp-server

Additional notes and configuration

The MCP server provides multiple ways to connect. You can configure a local runtime, a desktop client, or a global CLI that other tools can invoke. Ensure you start the server after installing and building when using a local approach, and verify the client can reach the server using the designated command or URL.

Available tools

list_shadcn_components

Browse available shadcn/ui components.

get_component_info

Retrieve detailed information about a specific component, including dependencies.

generate_component_usage

Create code examples showing how to use a component with proper imports and setup.

get_installation_steps

Provide installation commands and steps for adding the component to your project.