apply_theme
Apply a TweakCN theme preset to the project
LABSCO SUMMARY
The component's actual source, not a paraphrase of it.
What it removes is the round trip through the docs site: ask for a component or a block by name and the source and demo come back, so what gets written next is built on what the library ships rather than on what the model remembers. Adding a GitHub token is the one setup step worth doing — the unauthenticated hourly limit runs out fast.
What it is
A server over the shadcn/ui v4 repository and the TweakCN theme presets. Components and blocks come back as source you can paste, alongside their demo code and metadata — and the same tools serve React, Svelte, Vue or React Native depending on which framework the server was started for.
What you get
- The source of any component, with its demo code and its metadata — dependencies, description and configuration
- The whole component list, and blocks listed by category
- A complete block's implementation — a dashboard, calendar or login block — rather than a snippet of one
- The repository's directory structure at the owner, repo, branch and path you name
- TweakCN themes listed and read, and one applied to the project, with a dry run first
- Four frameworks from one server: React with either Radix or Base UI underneath, plus shadcn-svelte, shadcn-vue and react-native-reusables
- Caching over the GitHub API, so repeated reads of the same component do not spend the rate limit twice
Requirements
Node and network access — source is read from the shadcn-ui repository on GitHub when you ask for it, which is why the structure call takes an owner, a repo and a branch. Run over stdio from npm as @jpisnice/shadcn-ui-mcp-server; Claude Desktop can instead install the packaged .mcpb extension kept in the repository. Without credentials GitHub allows 60 requests an hour, which is the practical ceiling; a personal access token raises that to 5,000 and needs no scopes at all, since everything read is public. Pass it as --github-api-key or as GITHUB_PERSONAL_ACCESS_TOKEN. The framework is chosen at launch with --framework, and --ui-library base switches the React output off Radix. For multi-client setups the server also runs in SSE mode, or both at once, on a port that defaults to 7423.
Setup effort
One command — npx @jpisnice/shadcn-ui-mcp-server
USE CASES
01
Adding a component the right way
Pull its source and its demo together, and check the metadata for what it depends on before wiring it in.
02
Finding out what is even available
List the components, or the blocks grouped by category, instead of guessing at names.
03
Starting from a whole screen rather than a widget
Take a complete block — a dashboard or a login screen — and adapt it, with the components it uses fetched alongside.
04
Restyling the project in one pass
List the themes, read the one you like, and apply it — running the dry run first to see what it would change.
05
Working in Svelte, Vue or React Native
Start the server for that framework and ask for the same components; the implementations that come back are the ones for your stack.
06
Looking around the repository itself
Read the directory structure at the branch and path you name, when what you need is not a named component.
10 tools
Counted once with only startup setup. Other versions, modes or optional credentials may expose a different list.
get_block
Get source code for a specific shadcn/ui v4 block (e.g., calendar-01, dashboard-01)
get_component
Get the source code for a specific shadcn/ui v4 component
get_component_demo
Get demo code illustrating how a shadcn/ui v4 component should be used
get_component_metadata
Get metadata for a specific shadcn/ui v4 component
get_directory_structure
Get the directory structure of the shadcn-ui v4 repository
get_theme
Get details of a specific tweakcn theme
list_blocks
Get all available shadcn/ui v4 blocks with categorization
list_components
Get all available shadcn/ui v4 components
list_themes
List available tweakcn themes
BEFORE YOU INSTALL
What to know first
Tools you get
10 tools when we connected. The theming tools list_themes, get_theme and apply_theme are not described in the documentation. The --framework and --ui-library flags change which repository the tools read from, not how many there are.
Requires
- npx on PATH
- Node.js >= 18.0.0
CONTEXT COST
Light Standing cost
Rated by the size of the 10 tool definitions that ride along on every turn, not by how many there are
INSTALLATION
Connect your client
Server setup
TERMINAL
npx @jpisnice/shadcn-ui-mcp-serverMCP Clients
Claude Desktop — MCPB bundle
Download https://github.com/Jpisnice/shadcn-ui-mcp-server/raw/master/shadcn-ui-mcp-server.mcpb from the repository
Double-click the file — Claude Desktop opens automatically
Enter your GitHub token (optional, for higher rate limits)
Click Install — the tools are available immediately
Claude Desktop, Claude Code, Continue
JSON
{
"mcpServers": {
"shadcn-ui": {
"command": "npx",
"args": [
"@jpisnice/shadcn-ui-mcp-server",
"--github-api-key",
"<YOUR_GITHUB_PERSONAL_ACCESS_TOKEN>"
]
}
}
}Cursor
CURSOR · JSON
{
"mcpServers": {
"shadcn-ui": {
"command": "npx",
"args": [
"@jpisnice/shadcn-ui-mcp-server"
],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "<YOUR_GITHUB_PERSONAL_ACCESS_TOKEN>"
}
}
}
}VS Code
VS CODE · JSON
{
"servers": {
"shadcn-ui-mcp-server": {
"command": "npx",
"args": [
"@jpisnice/shadcn-ui-mcp-server@2.0.0",
"--framework",
"react",
"--ui-library",
"radix"
],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "${input:github_token}"
},
"type": "stdio"
}
},
"inputs": [
{
"id": "github_token",
"type": "promptString",
"description": "GitHub Personal Access Token (optional, recommended for higher rate limits)"
}
]
}Claude Code — Docker SSE
CLAUDE CODE — DOCKER SSE · TERMINAL
git clone https://github.com/Jpisnice/shadcn-ui-mcp-server.git
cd shadcn-ui-mcp-server
docker-compose up -d
curl http://localhost:7423/health
claude mcp add --scope user --transport sse shadcn-mcp-server http://localhost:7423/sse
