vibe

<p align="center"> <img src="https://user-images.githubusercontent.com/60314759/147566893-63c5209a-8b83-4f32-af61-8b4c350ec770.png" width="300px" alt="Vibe Design System, by monday.com"> <h1 align="center">Vibe Design System</h1> </p> <p align="center"> Official <a href="https://monday.com">monday.com</a> UI resources for application development in React.js </p> <p align="center"> <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@vibe/core"> <a href="https://bundlephobia.com/package/@vibe/core"><img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/@vibe/core"></a> <a href="https://www.npmjs.com/package/@vibe/core"><img alt="NPM Version" src="https://img.shields.io/npm/v/@vibe/core?label=@vibe/core"></a> <a href="https://github.com/mondaycom/vibe/stargazers"><img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/mondaycom/vibe"></a> </p> <p align="center"> <a href="https://vibe.monday.com">Documentation</a> • <a href="https://vibe.monday.com/?path=/docs/catalog--docs">Catalog</a> • <a href="https://vibe.monday.com/?path=/story/playground--playground">Playground</a> </p>

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.