Overview
Vibe is a modern, React-based design system developed and used by monday.com. It provides a complete UI component library, theme system, design tokens, and accessibility-first practices to help teams build high-quality products with consistency and efficiency.
Vibe is more than just a component library. It reflects monday.com’s design language and best practices, offering developers and designers a cohesive system for building scalable and accessible web interfaces. It works out of the box with React and provides customization hooks, theme support, and Figma design files for a seamless design-to-code workflow.
Key Features:
Full set of modular React UI components
Supports light and dark themes with design tokens
Built-in accessibility (ARIA, keyboard nav, focus states)
Figma design resources for visual consistency
Easy customization with theming and overrides
Used at scale in a production enterprise-grade app
Installation:
npm install @mondaycom/vibe
Usage Example:
import { Button } from "@mondaycom/vibe";
function App() {
return <Button kind="primary">Click me</Button>;
}
Theming Example:
Vibe supports custom theming using CSS variables and token overrides. You can extend or override the base theme using the ThemeProvider.
import { ThemeProvider, themeLight } from "@mondaycom/vibe";
<ThemeProvider theme={themeLight}>
<App />
</ThemeProvider>
Component Coverage:
- Vibe includes a wide range of production-ready components such as:
- Buttons, Checkboxes, Inputs, Selects
- Dialogs, Modals, Popovers, Tooltips
- Cards, Lists, Tables
- Icons, Loaders, Avatars
- Layout and spacing utilities
- Date pickers, Tags, Badges, Tabs, and more
Each component follows accessibility standards and is built to be composable, responsive, and customizable.
Design Resources:
Vibe includes Figma files that align directly with its components, enabling smoother design-to-development handoffs. Designers can use the same tokens, spacing, and components available to developers, reducing friction and inconsistency.
Use Cases:
- Build consistent and accessible user interfaces in React
- Create custom dashboards, workflows, and admin panels
- Scale design implementation across large teams and projects
- Integrate with Figma to streamline product development
- Maintain unified UX across multiple apps
