Skip to main content
Glama
Sign In
Shadcn UI v4 MCP Server

Shadcn UI v4 MCP Server

by danielbittencourt-bizsaver
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Remote

Shadcn UI v4 MCP Server

npm version License: MIT

Trust Score

🚀 The fastest way to integrate shadcn/ui components into your AI workflow

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

✨ Key Features

  • 🎯 Multi-Framework Support - React, Svelte, Vue, and React Native implementations

  • 📦 Component Source Code - Latest shadcn/ui v4 TypeScript source

  • 🎨 Component Demos - Example implementations and usage patterns

  • 🏗️ Blocks Support - Complete block implementations (dashboards, calendars, forms)

  • 📋 Metadata Access - Dependencies, descriptions, and configuration details

  • 🔍 Directory Browsing - Explore repository structures

  • ⚡ Smart Caching - Efficient GitHub API integration with rate limit handling

  • 🌐 SSE Transport - Server-Sent Events support for multi-client deployments

  • 🐳 Docker Ready - Production-ready containerization with Docker Compose

Related MCP server: CDS Components MCP Server

🚀 Quick Start

# Basic usage (60 requests/hour)
npx @jpisnice/shadcn-ui-mcp-server

# With GitHub token (5000 requests/hour) - Recommended
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here

# Switch frameworks
npx @jpisnice/shadcn-ui-mcp-server --framework svelte
npx @jpisnice/shadcn-ui-mcp-server --framework vue
npx @jpisnice/shadcn-ui-mcp-server --framework react-native

🎯 Get your GitHub token in 2 minutes: docs/getting-started/github-token.md

🌐 SSE Transport & Docker Deployment

Run the server with Server-Sent Events (SSE) transport for multi-client support and production deployments:

Quick Start with SSE

# SSE mode (supports multiple concurrent connections)
node build/index.js --mode sse --port 7423

# Docker Compose (production ready)
docker-compose up -d

# Connect with Claude Code
claude mcp add --scope user --transport sse shadcn-mcp-server http://localhost:7423/sse

Transport Modes

  • stdio (default) - Standard input/output for CLI usage

  • sse - Server-Sent Events for HTTP-based connections

  • dual - Both stdio and SSE simultaneously

Docker Examples

# Basic container
docker run -p 7423:7423 shadcn-ui-mcp-server

# With GitHub API token
docker run -p 7423:7423 -e GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token shadcn-ui-mcp-server

# Docker Compose (recommended)
docker-compose up -d
curl http://localhost:7423/health

Environment Variables

  • MCP_TRANSPORT_MODE - Transport mode (stdio|sse|dual)

  • MCP_PORT - SSE server port (default: 7423 - SHADCN on keypad!)

  • MCP_HOST - Host binding (default: 0.0.0.0)

  • MCP_CORS_ORIGINS - CORS origins (comma-separated)

  • GITHUB_PERSONAL_ACCESS_TOKEN - GitHub API token

📚 Documentation

Section

Description

🚀 Getting Started

Installation, setup, and first steps

⚙️ Configuration

Framework selection, tokens, and options

🔌 Integration

Editor and tool integrations

📖 Usage

Examples, tutorials, and use cases

🎨 Frameworks

Framework-specific documentation

🐛 Troubleshooting

Common issues and solutions

🔧 API Reference

Tool reference and technical details

🎨 Framework Support

This MCP server supports four popular shadcn implementations:

Framework

Repository

Maintainer

Description

React (default)

shadcn/ui

shadcn

React components from shadcn/ui v4

Svelte

shadcn-svelte

huntabyte

Svelte components from shadcn-svelte

Vue

shadcn-vue

unovue

Vue components from shadcn-vue

React Native

react-native-reusables

Founded Labs

React Native components from react-native-reusables

🛠️ Essential Setup

1. Get GitHub Token (Recommended)

# Visit: https://github.com/settings/tokens
# Generate token with no scopes needed
export GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here

2. Run Server

# React (default)
npx @jpisnice/shadcn-ui-mcp-server

# Svelte
npx @jpisnice/shadcn-ui-mcp-server --framework svelte

# Vue  
npx @jpisnice/shadcn-ui-mcp-server --framework vue

# React Native
npx @jpisnice/shadcn-ui-mcp-server --framework react-native

3. Integrate with Your Editor

🎯 Use Cases

  • AI-Powered Development - Let AI assistants build UIs with shadcn/ui

  • Multi-Client Deployments - SSE transport supports multiple concurrent connections

  • Production Environments - Docker Compose ready with health checks and monitoring

  • 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

📦 Installation

# Global installation (optional)
npm install -g @jpisnice/shadcn-ui-mcp-server

# Or use npx (recommended)
npx @jpisnice/shadcn-ui-mcp-server

🔗 Quick Links

📄 License

MIT License - see LICENSE for details.

🙏 Acknowledgments

  • shadcn - For the amazing React UI component library

  • huntabyte - For the excellent Svelte implementation

  • unovue - For the comprehensive Vue implementation

  • Founded Labs - For the React Native implementation

  • Anthropic - For the Model Context Protocol specification

Made with ❤️ by Janardhan Polle

Star ⭐ this repo if you find it helpful!

Available Tools

10 tools
apply_themeC
Destructive

Apply a TweakCN theme preset to the project

NameRequiredDescriptionDefault
queryNoSearch query for theme (e.g., 'cyberpunk', 'modern')
dryRunNoIf true, returns preview instead of writing files
presetIdNoSpecific preset ID if known
tailwindVersionNoTailwind CSS version (default: '4')
get_blockA
Read-only

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

NameRequiredDescriptionDefault
blockNameYesName of the block (e.g., "calendar-01", "dashboard-01", "login-02")
includeComponentsNoWhether to include component files for complex blocks (default: true)
get_componentA
Read-only

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

NameRequiredDescriptionDefault
componentNameYesName of the shadcn/ui component (e.g., "accordion", "button")
get_component_demoA
Read-only

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

NameRequiredDescriptionDefault
componentNameYesName of the shadcn/ui component (e.g., "accordion", "button")
get_component_metadataA
Read-only

Get metadata for a specific shadcn/ui v4 component

NameRequiredDescriptionDefault
componentNameYesName of the shadcn/ui component (e.g., "accordion", "button")
get_directory_structureB
Read-only

Get the directory structure of the shadcn-ui v4 repository

NameRequiredDescriptionDefault
pathNoPath within the repository (default: v4 registry)
repoNoRepository name (default: "ui")
ownerNoRepository owner (default: "shadcn-ui")
branchNoBranch name (default: "main")
get_themeB
Read-only

Get details of a specific tweakcn theme

NameRequiredDescriptionDefault
themeNameYesName or ID of the theme to retrieve
list_blocksB
Read-only

Get all available shadcn/ui v4 blocks with categorization

NameRequiredDescriptionDefault
categoryNoFilter by category (calendar, dashboard, login, sidebar, products)
list_componentsB
Read-only

Get all available shadcn/ui v4 components

NameRequiredDescriptionDefault

No parameters

list_themesA
Read-only

List available tweakcn themes

NameRequiredDescriptionDefault

No parameters

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 10 tool updatesv1.1.4
    • First observedapply_theme
    • First observedget_block
    • First observedget_component
    • First observedget_component_demo
    • First observedget_component_metadata
    • First observedget_directory_structure
    • First observedget_theme
    • First observedlist_blocks
    • First observedlist_components
    • First observedlist_themes
Deploy Server
Claude Code, inside the Godot 4 editorFlockbay puts an AI agent in the real Godot 4 editor: it writes GDScript, runs your game and fixes what breaks. Free, or bring your own Claude Code or Codex.flockbay.comAd

TDQS

A3.7/5.0

Scored across 10 tools

Disambiguation4/5

Most tools target distinct resources (component, block, theme, repo structure) and actions (get, list, apply). However, get_component, get_component_demo, and get_component_metadata all relate to component details, which could cause slight confusion for an agent deciding which one to call.

Naming Consistency5/5

Every tool name follows a consistent snake_case verb_noun pattern: get_component, list_components, apply_theme, etc. The prefixes (get_, list_, apply_) are used uniformly, making the set highly predictable.

Tool Count5/5

With 10 tools, the surface is well-scoped for a UI component reference service. Each tool covers a distinct resource or operation without redundancy, fitting comfortably within the ideal 3–15 range.

Completeness4/5

The tools cover the core lifecycle: listing and fetching components, blocks, themes, demos, metadata, and applying themes. Minor gaps exist, such as no search/filter for components or blocks and no demo retrieval for blocks, but agents can work around these for the stated purpose.

Maintenance

ActivityInactive
ResponsivenessNo recent community issues

Resources

Related MCP Connectors

Related MCP Servers

  • shadcn-ui-mcp-server

    EzequielPereirae
    A
    license
    A
    quality
    D
    maintenance
    Provides AI assistants with comprehensive access to shadcn/ui v4 components, blocks, demos, and metadata across React, Svelte, Vue, and React Native, enabling efficient component integration and code generation.
    10
    6,797 npm
    MIT

  • UIShelf MCP Server

    SH20RAJ
    A
    license
    Not graded
    quality
    B
    maintenance
    Enables AI coding agents to search across 340+ React UI registries, inspect component code and quality scores, compare options, detect a project's stack, and generate or execute safe transactional install plans. It provides read and write safeguards with dry-run planning and rollback.
    1
    MIT