About Vibe Design System
Vibe Design System is monday.com's official set of React.js UI resources, offering components, styles and guidelines. It targets developers building applications in React, and includes an MCP server that AI development tools can use to look up Vibe components.
Key features
- 01@vibe/core component library and style tokens
- 02@vibe/icons icon library
- 03@vibe/testkit utilities for Playwright testing
- 04@vibe/codemod codemods and CLI tools
- 05MCP server for component APIs and usage examples
Use cases
- 01Building React application interfaces with official components
- 02Looking up Vibe component APIs from an AI development tool
- 03Migrating code between Vibe versions with codemods
MCP support
The project includes an MCP server (@vibe/mcp) that helps AI development tools find component APIs, usage examples and suitable icons.
Configuration
Local server config is the same for every client. Copy it into your client’s MCP config file.
We haven’t collected a package or remote endpoint for this server. Follow the instructions in the project README.
Tools
Local servers expose tools only once running on your machine, and the maintainer has not provided a tool list.
Details
From the project README
Vibe Design System
Official monday.com UI resources for application development in React.js
Documentation • Catalog • Playground
Overview
Vibe Design System is a collection of packages designed to streamline your development process and enhance the user experience, by providing a set of components, styles, and guidelines for building applications in React.js.
Installation
npm install @vibe/core
# or
yarn add @vibe/core
To load all the relevant CSS tokens, import the tokens file in your root application file:
import "@vibe/core/tokens";
Usage
Components are imported from the library's root entry:
import { Button } from "@vibe/core";
MCP
Vibe includes an MCP (Model Context Protocol) server that provides intelligent assistance for working with Vibe components. The MCP server can help you discover component APIs, get usage examples, find appropriate icons, and follow best practices.
To get started, follow the installation instructions in the @vibe/mcp docs to integrate it in your preferred AI development tools.
Ecosystem
- @vibe/core: Core component library
- @vibe/icons: Icons library
- @vibe/testkit: Testing utilities for Playwright
- @vibe/codemod: Codemods and CLI tools
- @vibe/style: Styling foundations (included in @vibe/core)
- vibe-storybook-components: Vibe Storybook Blocks
- storybook-addon-playground: A Component Playground Addon for Storybook
- @vibe/mcp: MCP server for Vibe Design System
Older Versions
Vibe 3 (@vibe/core v3) will no longer receive new features or enhancements but will continue to receive critical bug fixes as needed. We highly recommend following the migration guide to upgrade to the actively maintained Vibe 4, which includes the latest improvements, new components, and ongoing support.For version 3 documentation, see vibe.monday.com/v3.
Vibe 2 (monday-ui-react-core) is no longer maintained. For version 2 documentation, see vibe.monday.com/v2.
Contributing
We welcome and encourage every contributor! Please read our Contribution Guide.
Suggestions
If you have any questions or suggestions, please feel free to open a discussion.
Found a bug? Please open an issue.
Comments
New to MCP?
From what the protocol is to installing your first server, these answers cover most first questions.
An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.