PlugWiki
shadcn-ui-mcp-server logo

Shadcn UI MCP Server: Setup for Claude, Cursor and Other Apps

CommunityLocal
Getnpm@jpisnice/shadcn-ui-mcp-serverjpisnice/shadcn-ui-mcp-server
Tools
10
9 read · 1 change
Stars
3.1K
on GitHub
Downloads
7.2K
a week
Works in
12
apps
Risk
Medium
can write

Lets Claude, Cursor and other assistants look up shadcn/ui components, demos and blocks and apply themes to your project.

This is a community server by Jpisnice, not made by the shadcn team. It runs on your computer, fetches component code from GitHub, and needs no account.

It works for React by default and can switch to Svelte, Vue or React Native. A free GitHub token is optional and lifts the limit from 60 to 5000 requests an hour.

Good for

  • Frontend developers who build with shadcn/ui and want correct, current code
  • Teams using Svelte, Vue or React Native ports of shadcn
  • Designers who want to try TweakCN themes in a real project

Works in

12 should work

Tap an app to see how to set it up and any known problems.

Install shadcn-ui-mcp-server

Claude Code

  1. 1

    Copy this prompt.

    Add the shadcn-ui-mcp-server server to Claude Code. Run this command:

claude mcp add shadcn-ui -- npx -y @jpisnice/shadcn-ui-mcp-server

Then check that it loaded and tell me if I need to sign in or restart.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

Built from the package data we hold. Not yet tested by us.

Tools

  • Lists every shadcn/ui component

    Returns all available shadcn/ui v4 components.

    Try: “What shadcn components can I use?”

    Network · list_components

  • Gets a component's source code

    Fetches the source code of one shadcn/ui v4 component from GitHub.

    Try: “Show me the source of the Dialog component.”

    Network · get_component

  • Gets an example of using a component

    Returns demo code that shows how a component is meant to be used.

    Try: “Show a demo of the Tabs component.”

    Network · get_component_demo

  • Gets a component's dependencies and details

    Returns metadata for one component, such as its dependencies and description.

    Try: “What does the Calendar component depend on?”

    Network · get_component_metadata

  • Lists ready-made page blocks

    Returns every available block, grouped by category.

    Try: “What dashboard blocks are available?”

    Network · list_blocks

  • Gets the source of a block

    Fetches the source code of one block, such as dashboard-01, login-02 or sidebar-01.

    Try: “Get the code for the login-02 block.”

    Network · get_block

  • Browses the shadcn/ui repository folders

    Returns the directory structure of the shadcn-ui v4 repository.

    Try: “Show the folder layout of the shadcn repo.”

    Network · get_directory_structure

  • Lists TweakCN theme presets

    Returns the available TweakCN themes.

    Try: “Which TweakCN themes can I apply?”

    Network · list_themes

  • Shows one theme's details

    Returns the details of a single TweakCN theme.

    Try: “Show the details of the theme named amber.”

    Network · get_theme

  • Applies a theme to your project

    Writes a TweakCN theme preset into your project's CSS files.

    Try: “Apply the amber theme to this project.”

    Write · apply_theme

Read from the source code

Permissions

medium risk · 2 things to watch

Medium risk

It mostly reads public code from GitHub, and one tool writes a theme into your project files. Check the theme change before you accept it.

What it can do

  • Read your data
  • Create and change things
  • Delete things
  • Read-only mode

Watch out for

  • One tool writes to your project files

    The theme tool writes a preset into your CSS files. Review the change in version control. npmjs.com

  • Network mode listens on every interface

    In HTTP or dual mode the default host is 0.0.0.0. Set the host to 127.0.0.1 if you use it. github.com

Security advisories

No published security advisories as of Nov 1, 2026.

Technical details
Talks toapi.github.com. raw.githubusercontent.com
Sign-in and keysThe optional GitHub token is read from the GITHUB_PERSONAL_ACCESS_TOKEN setting or the --github-api-key flag.
Scopes

  • Optional GitHub token for higher rate limits; no write access needed

Questions

Is this the official shadcn MCP server?

No. It is a community project by Jpisnice and is not published by the shadcn team.

How is it different from the shadcn MCP server in the shadcn CLI?

This one is a separate project that reads component, block and theme source from GitHub. The shadcn team ships its own MCP server through the shadcn CLI (shadcn@latest mcp init), which browses and installs items from registries configured in components.json. Pick the CLI one for installing into your project, this one for looking up source and applying TweakCN themes.

Do I need a GitHub token?

No. The server works without one, limited to 60 GitHub requests an hour. A token raises that to 5000.

Which frameworks does it support?

React by default, plus Svelte, Vue and React Native. Choose one with the --framework flag, and React can use Base UI instead of Radix.

Can it run read-only?

No. Nine tools only read, but the theme tool writes to your project. Leave approval prompts on for it.

Does it run locally or in the cloud?

Locally by default over stdio. An HTTP mode and a Docker setup exist for shared use.

Information

updated Nov 2, 2026

Publisher
Community
Package
@jpisnice/shadcn-ui-mcp-server
Registry
npm
Transport
stdio
Auth
None
Version
3.0.0
License
MIT
Last commit
Oct 3, 2026
Open issues
5

GitHubnpmChangelogIssues

Sources

Docs, issue trackers and discussions this page is built from. Issues, quotes and findings above link to their own source.

Show all 3
  1. README.md · github.com
  2. shadcn-ui-mcp-server · npmjs.com
  3. MCP Server - shadcn/ui · ui.shadcn.com

Facts from the official MCP registry, GitHub, npm, PyPI and the Docker catalog. Updated Nov 2, 2026.