AI Plugin IndexUI components
shadcn/ui MCP servers and skills
There are 46 ways to connect shadcn/ui to Claude, ChatGPT, Cursor and other AI assistants: 8 MCP servers and 38 skills. The most used is Shadcn UI MCP Server (3.1k GitHub stars).
Best shadcn/ui MCP servers, compared →Most used
Shadcn UI MCP Server
Jpisnice
92A Model Context Protocol (MCP) server for shadcn/ui components, providing AI assistants with access to component source code, demos, blocks, and metadata.
AAA
shadcn-addremeda
82Follow up cleanup and refactors that **must** be done whenever a new shadcn component is added via the add cli command. This skill should be checked whenever a new file is added to the shadcn ui component directory (`src/components/ui`).
AAA
shadcn-ui-mcpJpisnice
77shadcn/ui component context and usage from Codex via MCP
AAB
Shadcn Svelte MCP
Michael-Obele
76shadcn-svelte documentation MCP server built with tmcp — runs on Node or Bun, deployable to Fly.io or Render
AAB
researchshadcn-labs
73Iterative, self-evaluating web research. Use when answering open-ended questions that require gathering and verifying information from multiple sources.
AAB
workspaceshadcn-labs
73How to safely operate the sandboxed workspace. Use for any multi-step task involving files or shell commands.
AAB
MCP servers (8)
- 1Shadcn UI MCP Server Jpisnice · Knowledge and memoryA Model Context Protocol (MCP) server for shadcn/ui components, providing AI assistants with access to component source code, demos, blocks, and metadata.92
- 2Shadcn Svelte MCP Michael-Obele · Cloud and DevOpsshadcn-svelte documentation MCP server built with tmcp — runs on Node or Bun, deployable to Fly.io or Render76
- 3Shadcn Studio MCP themeselectshadcn-studio MCP55
- 4Shadcn UI MCP Server ymaddMCP server for shadcn/ui component references53
- 5Shadcn UI MCP Server heilgarMCP server for shadcn/ui component references49
- 6Shadcn MCP roobyrmMCP server for shadcn/ui component references47
- 7Shadcn MCP Server magnusrodsethMCP Server for shadcn/ui components31
- 8Codeapp Shadcn Theme yourusername · Cloud and DevOpsAn MCP server for generating Shadcn/UI theme tokens from presets or custom color schemes (stdout + SSE + Docker)20
Skills (38)
- 1shadcn-add remeda · Developer toolsFollow up cleanup and refactors that **must** be done whenever a new shadcn component is added via the add cli command. This skill should be checked whenever a new file is added to the shadcn ui component directory (`src/components/ui`).82
- 2shadcn-ui-mcp Jpisnice · Knowledge and memoryshadcn/ui component context and usage from Codex via MCP77
- 3research shadcn-labs · Search and webIterative, self-evaluating web research. Use when answering open-ended questions that require gathering and verifying information from multiple sources.73
- 4workspace shadcn-labs · Documents and filesHow to safely operate the sandboxed workspace. Use for any multi-step task involving files or shell commands.73
- 5editframe-cli shadcn-labs · Browser automationCommand-line tools for Editframe video development. Render compositions to MP4 locally, preview in the browser, transcribe audio, and deploy to the cloud.71
- 6vite-plugin shadcn-labs · Developer toolsVite integration for Editframe development with local video transcoding, asset serving, file API endpoints, and visual regression testing.69
- 7shadcn maotoumao · Developer toolsManages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".66
- 8shadcn-ui podoProject-aware shadcn/ui workflow for searching, adding, composing, and fixing components with correct patterns. Understands the local component registry and avoids common shadcn anti-patterns during implementation.49
- 9shadcn-ui-usage ShenSandaru · DesignGuidelines for using shadcn/ui components and Tailwind CSS in Growing Worlds. Use when building navigation, inspector drawers, dialogs, tooltips, and buttons.43
- 10shadcn-ui galyarderlabsBuild UI components with shadcn/ui. Pairs with the Stitch design loop to ship structured, accessible components quickly.37
- 11shadcn skeletorflet · Designshadcn/ui — copy-paste component library built on Radix primitives, styled with Tailwind CSS, and managed via CLI.37
- 12taro-shadcn-cli-helper louisyoungx教用户如何使用 taro-shadcn CLI 初始化项目和添加组件。当用户询问 CLI 用法或如何创建组件时调用。37
- 13shadcn_ui-progress serverpod · ProductivityShow progress with ShadProgress; determinate (value 0–1) or indeterminate. Use when displaying task completion or loading progress in a Flutter shadcn_ui app.33
- 14shadcn_ui-checkbox serverpodAdd checkboxes with ShadCheckbox and ShadCheckboxFormField; label, sublabel, form validation. Use when adding boolean toggles or terms acceptance in a Flutter shadcn_ui app or ShadForm.33
- 15shadcn-ui-components Fabric-Pro · DesignBuild beautiful, accessible UI components using shadcn/ui library with Radix UI primitives and Tailwind CSS styling that you own and can customize. Use when creating accessible component libraries, implementing common UI patterns (dialogs, dropdowns, tooltips), building forms with validation, creating data tables, implementing command palettes, using Radix UI primitives, customizing components with Tailwind, or building design systems with full ownership of code.33
- 16shadcn-mcp iDorgham · Knowledge and memoryUsing Model Context Protocol (MCP) tools to scaffold and customize Shadcn components in the GateFlow monorepo.32
- 17crux-tailwind-shadcn mohamed-abdelfattah-frontend · DesignBuild accessible, token-driven Tailwind and shadcn/ui interfaces without losing product identity.30
- 18shadcn-vue-theming zone1987 · Designshadcn-vue theming: CSS variable tokens, light and dark mode, Tailwind v4 @theme, typography. Use when the request names shadcn-vue theming, dark mode or its CSS variables.27
- 19shadcn-ui JumpsyBuild UI components with shadcn/ui. Pairs with the Stitch design loop to ship structured, accessible components quickly.26
- 20shadcn-ui Mauritania-Programmers-Communityshadcn/ui component library patterns, CLI usage, and registry system25
- 21shadcn TypeItOrgAdd or update shadcn registry components, inspect presets, or resolve component API questions not answered by installed source.24
- 22add-shadcn ThiagoRech1997 · DesignUse when installing a shadcn/ui component. Triggers on "/add-shadcn", "shadcn add", "instalar componente shadcn", or requests to add UI primitives like button, dialog, etc. Knows the project uses style "base-nova" and Tailwind v4 with inline @theme tokens.24
- 23piapc-shadcn-conventions NicolasNoceteUse when creating, installing, composing, styling, or reviewing shadcn/ui and Base UI components in PIAPC.23
- 24shadcn-add cotacaAdding or regenerating a shadcn/ui component in SmartReceipts (Base UI, base-mira style). Use before running `npx shadcn@latest add`, or when a screen needs a primitive not yet in frontend/src/components/ui/.23
- 25shadcn-ui publieopleBuild UI components with shadcn/ui. Pairs with the Stitch design loop to ship structured, accessible components quickly.23
- 26tailwind-v4-shadcn ai4brands-design · DesignProduction-tested stack for Tailwind v4 and shadcn/ui. Optimized for AI Code Generation.22
- 27shadcn-ui SebastianoFereiroUse shadcn/ui components in Next.js projects22
- 28we-shadcn-conventions mikelneonedwinHouse rules for working with shadcn/ui components — deferring to the official shadcn skill, respecting default styling and theme tokens, and using React Hook Form for forms. Use whenever shadcn components or theming are part of the discussion.21
- 29shadcn-nextjs-setup ChristineThamReference on properly scaffolding the specific UI/UX constraints on a Next.js Shadcn layout.21
- 30shadcn waniaa00Build accessible, themeable UI components using the ShadCN component library.20
- 31shadcn-expert Om-Borse26Guidelines for perfectly implementing shadcn/ui components.19
- 32shadcn-ui Yoon-Hae-Minshadcn/ui 컴포넌트 사용 가이드. UI 컴포넌트 추가/수정, Form 구현, Dialog/Sheet 모달 작업 시 사용. 트리거: shadcn 컴포넌트 추가, UI 컴포넌트 커스터마이징, Form/Dialog 구현 요청. (project)19
- 33shadcn David-Li0406 · DesignCreate, update, and maintain shadcn/ui components in the `apps/web` Next.js project. Use when asked to add UI components, sync styles/theme, adjust Tailwind, or apply shadcn/ui best practices in this codebase.19
- 34shadcn-ui-setup David-Li0406 · DesignAdd Shadcn UI components with dark mode support using next-themes. Includes theme provider and CSS variables configuration.18
- 35shadcn-vue-skilld Nethrenial · Developer toolsAdd components to your apps. ALWAYS use when writing code importing \"shadcn-vue\". Consult for debugging, best practices, or modifying shadcn-vue, shadcn vue.18
- 36shadcn-default xcodeassociatedUse shadcn/ui correctly with React/Vite and Bun. Use for components, registry/MCP lookup, accessibility, theming, and forms.18
- 37shadcn-enforcer Vlex127 · DesignEnsures perfect shadcn/ui + Tailwind usage with no AI slop.16
- 38bun-next-shadcn dimstefanakisBootstrap a Next.js app with Bun and initialize shadcn UI. Use when setting up new site codebases or when the user asks to create a new Next.js project with Bun and shadcn.15
Questions
Is there an official shadcn/ui MCP server?
Check the publisher on each listing: servers published by shadcn/ui itself are the official ones. The most used shadcn/ui server here is Shadcn UI MCP Server by Jpisnice.
How do I connect shadcn/ui to Claude?
Pick a server below, open its page and copy the install command for Claude Code, or the config block for Claude Desktop. Most shadcn/ui servers need an API key or token from your shadcn/ui account.