Frameworks & SDKs#Claude Code #Cursor #Any agent#Coding #Frontend #Docs

monday.com React design system with MCP support

Vibe provides a shared set of React components, styles, and design tokens for monday.com-style app development. The repo also ships codemods, testing tools, storybook blocks, and an MCP server so builders can inspect components and use them from AI tools.

675 stars•360 forks•TypeScript•Updated 7d ago

Who it's for

Builders who are developing React apps and want reusable UI components, tokens, and agent-friendly docs.

What it delivers

You can build with consistent monday.com UI components and look up component usage from your agent tools.

What it does

Core component library

Reusable UI components exported from `@vibe/core`, including entries like `Button`.

Design tokens and styles

Tokens and styling foundations for loading the Vibe visual system in an app.

Icons package

A separate icon library in `packages/icons` for app interfaces.

Codemods and CLI tools

Migration and refactor helpers in `packages/codemod`.

Testing utilities

Playwright-focused helpers in `packages/testkit`.

MCP server

`packages/mcp` provides an MCP server for discovering APIs, examples, icons, and best practices.

How to get it

1Run

npm install @vibe/core
# or
yarn add @vibe/core

README

Vibe Design System, by monday.com

Vibe Design System

Official monday.com UI resources for application development in React.js

NPM Downloads

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.

Files in the repo

Repository payload•15 top-level entries

.claude— Claude Code skills, agents, commands, hooks
.cursor— Cursor rules and settings
.github— GitHub workflows and templates
packages— 13 items
scripts— Helper scripts
.gitignore
.nvmrc
.prettierrc
CLAUDE.md— Instructions Claude Code reads every session
CNAME
CONTRIBUTING.md
lerna.json
package.json— Node package: install with npm
README.md— The README
yarn.lock

Discussion (0)

Ask about usage, or say what you built with it

No comments yet. Be the first to say what this is good for.

More frameworks & sdks

heygen-com/hyperframesFrameworks & SDKs

Write HTML. Render video. Built for agents.

49k

HKUDS/nanobotFrameworks & SDKs

Ultra-lightweight, open-source, self-hosted personal AI agent framework in Python with WebUI, tools, memory, MCP, multi-agent workflows, automation, and chat apps

48k

microsoft/

SkillOpt

microsoft/SkillOptFrameworks & SDKs

SkillOpt is a text-space optimizer that trains reusable natural-language skills for frozen LLM agents through trajectory-driven edits, validation-gated updates, and deployable best_skill.md artifacts.

17k

omnigent-ai/omnigentFrameworks & SDKs

Omnigent is an open-source AI agent framework and meta-harness: orchestrate Claude Code, Codex, Cursor, Pi, and custom agents — swap harnesses without rewriting, enforce policies and sandboxing, and collaborate in real time from any device.

9.8k

kyegomez/

OpenMythos

kyegomez/OpenMythosFrameworks & SDKs

A theoretical reconstruction of the Claude Mythos architecture, built from first principles using the available research literature.

15k

D4Vinci/ScraplingFrameworks & SDKs

🕷️ An adaptive Web Scraping framework that handles everything from a single request to a full-scale crawl!

80k