shadcn MCP Server
Registers custom React components with the shadcn registry, allowing them to be installed via the shadcn CLI or added by AI assistants in projects configured with components.json.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@shadcn MCP ServerAdd the social-post-card component from Nitish2620 registry to my project"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
๐จ Custom Component Registry & MCP Server
A production-grade, MNC-standard custom React component library and registry powered by Vite, TypeScript, Tailwind CSS v4, and the shadcn MCP Server.
๐ Organized Repository Structure
shadcn-mcp-app/
โโโ public/
โ โโโ r/ <-- REGISTRY SPECIFICATION FILES
โ โโโ registry.json <-- Master list of all components
โ โโโ social-post-card.json <-- 1-Command CLI installer spec
โ
โโโ src/
โ โโโ components/ <-- SOURCE CODE ORGANIZED BY CATEGORY
โ โโโ social/ <-- Category: Social & Feed
โ โโโ SocialPostCard.tsx
โ โโโ types.ts
โ
โโโ components.json <-- shadcn MCP Registry Config
โโโ README.md <-- Project Documentation
โโโ package.jsonRelated MCP server: MCP Server Starter Template
๐งฉ Component Catalog
Component | Category | Description | 1-Command Installation |
Social Post Card |
| MNC-grade feed card with multi-reaction bar, right-side discussion panel, audio voice note player, and lightbox. |
|
๐ How Developers Can Use This Registry
Option 1: 1-Command CLI Install (Recommended)
Run this command inside any React / Next.js / Vite project:
npx shadcn@latest add "https://raw.githubusercontent.com/Nitish2620/shadcn-mcp-app/main/public/r/social-post-card.json"Option 2: AI Assistant Prompt (Claude Code, Cursor, VS Code)
If your project is configured with components.json, simply ask your AI assistant:
"Add the social-post-card component from Nitish2620 registry to my project"
๐ How to Add New Components Cleanly
When adding a new component to this repository:
Create a category subfolder:
src/components/<category>/<ComponentName>.tsxCreate its registry JSON:
public/r/<component-name>.jsonCommit and push:
git add . git commit -m "feat: add <component-name> component" git push origin main
๐ License
MIT ยฉ Nitish Yadav
This server cannot be deployed
Maintenance
Related MCP Connectors
Serves your design system and coding standards to coding agents, so they stop guessing.
Software component catalog: search your org's services, docs, APIs, dependencies, and ownership.
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
Versioned documentation registry and semantic search for AI tools and coding assistants.
Related MCP Servers
- AlicenseAqualityCmaintenanceA Model Context Protocol server that provides AI assistants with access to ReactBits.dev components - a collection of 135+ animated React components for creative developers.5166 npm64MIT
- AlicenseNot gradedqualityDmaintenanceProvides a foundation for building MCP servers that expose UI component registries to AI assistants, enabling component discovery and retrieval.33 npm11MIT
- AlicenseAqualityCmaintenanceMCP server for appCN - discover, search, install, and correctly use copy-paste React Native / Expo UI components (including an AI-native collection) from the live registry503MIT
- AlicenseAqualityBmaintenanceProvides coding agents live access to shadcn-style component registries, enabling them to search, compare, and fetch real component source code for UI composition.561 npm5MIT