":null,"digest":"$undefined"} 27:I[66774,["7626","static/chunks/f6ab4fea-4425dae3da7674a3.js","5232","static/chunks/5232-db5923cda78a4960.js","6465","static/chunks/6465-6b79f1dc957ae3f4.js","9388","static/chunks/9388-d1a745fd53a10850.js","9732","static/chunks/9732-8158987224fdfa35.js","1358","static/chunks/1358-6d532ad4ca2bc4bf.js","2439","static/chunks/app/%5Blocale%5D/(default)/tag/%5Bname%5D/page-e01bef69b5169e46.js"],"PageTitleTabs"] 28:I[85939,["7626","static/chunks/f6ab4fea-4425dae3da7674a3.js","5232","static/chunks/5232-db5923cda78a4960.js","6465","static/chunks/6465-6b79f1dc957ae3f4.js","9388","static/chunks/9388-d1a745fd53a10850.js","9732","static/chunks/9732-8158987224fdfa35.js","1358","static/chunks/1358-6d532ad4ca2bc4bf.js","2439","static/chunks/app/%5Blocale%5D/(default)/tag/%5Bname%5D/page-e01bef69b5169e46.js"],"default"] 2b:I[41664,["7626","static/chunks/f6ab4fea-4425dae3da7674a3.js","5232","static/chunks/5232-db5923cda78a4960.js","6465","static/chunks/6465-6b79f1dc957ae3f4.js","9388","static/chunks/9388-d1a745fd53a10850.js","9732","static/chunks/9732-8158987224fdfa35.js","1358","static/chunks/1358-6d532ad4ca2bc4bf.js","2439","static/chunks/app/%5Blocale%5D/(default)/tag/%5Bname%5D/page-e01bef69b5169e46.js"],"Pagination"] 29:T1017,

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 ```bash 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: ```javascript import "@vibe/core/tokens"; ``` ## Usage Components are imported from the library's root entry: ```javascript 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](https://github.com/mondaycom/vibe/blob/master/packages/mcp/README.md) docs to integrate it in your preferred AI development tools. ## Ecosystem - [@vibe/core](https://github.com/mondaycom/vibe/blob/master/packages/core/README.md): Core component library - [@vibe/icons](https://github.com/mondaycom/vibe/blob/master/packages/icons/README.md): Icons library - [@vibe/testkit](https://github.com/mondaycom/vibe/blob/master/packages/testkit/README.md): Testing utilities for Playwright - [@vibe/codemod](https://github.com/mondaycom/vibe/blob/master/packages/codemod/README.md): Codemods and CLI tools - [monday-ui-style](https://github.com/mondaycom/vibe/blob/master/packages/style/README.md): Styling foundations (included in @vibe/core) - [vibe-storybook-compone

#tsx

Vibe Design System