A Chakra UI wrapper for the popular library React Select
If you already use Chakra, the chakra mcp server is the piece that lets your assistant work with it directly. A Chakra UI wrapper for the popular library React Select.
To use this package, you'll need to have @chakra-ui/react@3 set up like in the guide in their docs.
The toolset is worth reading before you wire it up, because it tells you what the integration is really for:
tagColorPalette — You can pass the tagColorPalette prop to the select component to change all of the selected options tags' colors. You can view the whole list offocusRingColor — The prop focusRingColor can be passed with Chakra color tokens which will emulate style the control component when focusedchakraStyles — All of the style keys offered in the original package can be used in the chakraStyles prop except for menuPortal. Along with [some otherCaveats — One change between the keys in the chakraStyles prop and the original styles prop, is that in the original the input styles apply to a containerThe server ships on npm as @chakra-ui/react, so your MCP client can launch it on demand — there is no separate build step. Add the server block to your client's configuration, restart it, and the tools register themselves.
This sits in the developer tooling group, where several servers overlap in what they claim to do but differ sharply once you actually set them up. Chakra's toolset — tagColorPalette, focusRingColor, chakraStyles and 1 more — is a fair guide to whether it matches your workflow. It is maintained by GitHub Actions; worth a glance at recent repository activity before you build anything load-bearing on it.
This entry was verified against Chakra's own documentation before publication; SyncDev keeps the directory reviewed rather than auto-generated.
| Tool | What it does |
|---|---|
| tagColorPalette | You can pass the tagColorPalette prop to the select component to change all of the selected options tags' colors. You can view the whole list of available color palettes in [the Chakra docs](https://www.chakra-ui.com/doc |
| focusRingColor | The prop focusRingColor can be passed with Chakra color tokens which will emulate style the control component when focused. |
| chakraStyles | All of the style keys offered in the original package can be used in the chakraStyles prop except for menuPortal. Along with [some other caveats](#caveats), this is explained below. |
| Caveats | One change between the keys in the chakraStyles prop and the original styles prop, is that in the original the input styles apply to a container surrounding the HTML <input /> element, and there is no key for styling the |
{
"mcpServers": {
"chakra": {
"command": "npx",
"args": ["-y", "@chakra-ui/react"]
}
}
}Add to claude_desktop_config.json, then restart Claude Desktop.
Kill hallucinated APIs — version-accurate, up-to-date library documentation injected straight into context.
Microsoft's official browser automation server — drive a real browser through the accessibility tree, no screenshots needed.
GitHub's official server — repos, issues, pull requests, Actions and code security, straight from your assistant.
Issue tracking at the speed of conversation — Linear's official hosted server with OAuth and zero install.
Local repository surgery — status, diffs, commits, branches and history for any repo on disk.
Timezone sanity for AI — current time anywhere and correct conversions, without the model doing date math.