Shadcn UI MCP Server
Shadcn UI v4 MCP Server
An MCP server that gives the agent shadcn/ui component source, demos and blocks for React, Svelte, Vue and React Native
- 3,098 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Runs a local process via npx or Docker
- Makes network calls to the GitHub API to fetch component source
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add mcp/shadcn-ui-v4-mcp-serverDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Runs a local process via npx or Docker
- Makes network calls to the GitHub API to fetch component source
This is third-party code. Review the repository files before installing.
What it does
The server connects to the agent over MCP and exposes shadcn/ui v4 components: TypeScript source, usage demos, ready blocks for dashboards, forms and calendars, and metadata with dependencies. It reads from the shadcn repositories through the GitHub API, so the agent gets current versions instead of stale recollections. A framework flag selects the stack: React with Radix or Base primitives, Svelte, Vue or React Native. It provides tools to list components and blocks and to browse the repository structure. It runs over stdio for local use and over SSE for multiple clients at once, with a Docker image available.
Who it is for. For frontend developers and designers who build shadcn/ui interfaces with an agent.
Good fit when
- The agent builds a shadcn/ui interface and needs exact component source
- You need ready blocks: a dashboard, a form, a calendar
- You work not only with React but also with Svelte, Vue or React Native
Not a fit when
- The project does not use shadcn/ui
- You need your own design system rather than shadcn components
Example request
Build a settings page with shadcn/ui: pull the form and switch components from the shadcn MCPMCP
- Transport
- stdio, sse
- Authentication
- key is optional
Environment variables
GITHUB_PERSONAL_ACCESS_TOKENsecret- A personal GitHub token. Optional, raises the GitHub API limit from 60 to 5000 requests per hour. Can also be passed via the --github-api-key flag.
Limitations
The server reads components through the GitHub API. Without a token the limit is about 60 requests per hour; a personal GitHub token raises it to 5000. The server itself runs locally via npx or in Docker and needs Node.js 18 or newer. It returns source code, and the agent is what writes files into the project.
How to disable. Remove the server from your client's MCP configuration. In Claude Code: claude mcp remove shadcn.
FAQ
Do I need a GitHub token?
No. Without one you get about 60 requests per hour; a personal token raises the limit to 5000, which is enough for active work.
Which frameworks are supported?
React by default, plus Svelte, Vue and React Native. The stack is chosen with the --framework flag. For React you can switch from Radix to Base with --ui-library.
Discussion
No questions or reviews yet.
Related
MCP serversOfficial shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
The Arc UI MCP server: an agent searches animated React components, reads docs and props and gets the shadcn install command.
MCP server of a React component library for agent interfaces: the agent finds a component and adds it to your project
21st.dev MCP server and plugin: search ready React/Tailwind components and logos and generate UI from your agent
Chakra UI MCP server: a reference for components, props and theme tokens, plus code review for moving from version 2 to 3
MCP server for the UI Beats catalog of animated React components: search, props, source code and install command for an agent
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| Shadcn UI MCP Server (this card) | no | key is optional | 3,098 | |
| shadcn-vue skill for agents | yes | 10,807 | the shadcn-vue skill reads your project settings and teaches an agent | |
| Vibe MCP | yes | not required | 695 | Vibe MCP gives an agent components |
README in short
The README describes an MCP server for shadcn/ui v4 that gives the agent component source, demos, blocks and metadata. It shows running via npx, installing as an npm package, building from source and an SSE mode with Docker Compose for multiple clients. It documents framework selection (React, Svelte, Vue, React Native), environment variables and getting a GitHub token to raise rate limits. It includes setup notes for Claude Code, Claude Desktop, Cursor, VS Code and Continue. MIT licensed.