Vibe Design System

Vibe デザインシステム

React.js でのアプリケーション開発に利用できる、monday.com 公式の UI リソース

ドキュメント • カタログ • プレイグラウンド

概要

Vibe デザインシステムは、React.js でアプリケーションを構築するためのコンポーネント、スタイル、ガイドラインを提供し、開発プロセスの効率化とユーザーエクスペリエンスの向上を実現するパッケージ群です。

インストール

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

関連するすべての CSS トークンを読み込むには、ルートアプリケーションファイルにトークンファイルをインポートします。

import "@vibe/core/tokens";

使い方

コンポーネントはライブラリのルートエントリからインポートします。

import { Button } from "@vibe/core";

MCP

Vibe には、Vibe コンポーネントを扱う際にインテリジェントな支援を提供する MCP（Model Context Protocol）サーバーが含まれています。MCP サーバーを使うと、コンポーネント API の検索、使用例の取得、適切なアイコンの検索、ベストプラクティスの確認ができます。

利用を開始するには、@vibe/mcp のドキュメントに記載されたインストール手順に従って、お好みの AI 開発ツールに統合してください。

エコシステム

• @vibe/core：コアコンポーネントライブラリ
• @vibe/icons：アイコンライブラリ
• @vibe/testkit：Playwright 用テストユーティリティ
• @vibe/codemod：コードモッドと CLI ツール
• @vibe/style：スタイリングの基盤（@vibe/core に含まれています）
• vibe-storybook-components：Vibe Storybook ブロック
• storybook-addon-playground：Storybook 用コンポーネントプレイグラウンドアドオン
• @vibe/mcp：Vibe デザインシステム用 MCP サーバー

旧バージョン

Vibe 3（@vibe/core v3）には新機能や機能強化が追加されなくなりますが、必要に応じて重要なバグ修正は引き続き提供されます。最新の改善、新しいコンポーネント、継続的なサポートが含まれる、積極的にメンテナンスされている Vibe 4 にアップグレードするには、移行ガイドに従うことを強くおすすめします。バージョン 3 のドキュメントについては、vibe.monday.com/v3 をご覧ください。

Vibe 2（monday-ui-react-core）はメンテナンスされていません。バージョン 2 のドキュメントについては、vibe.monday.com/v2 をご覧ください。

コントリビューション

すべてのコントリビューターを歓迎し、参加をお待ちしています。コントリビューションガイドをお読みください。

ご提案

ご質問やご提案がありましたら、お気軽にディスカッションを開始してください。

バグを見つけましたか？Issue を作成してください。