Vibe

Vibeデザインシステムはmonday.com公式のReact.js UIリソースライブラリで、アプリケーションを構築するためのコンポーネント、スタイル、ガイドのセットを提供します。

開発者ツール研究とデータ #Reactコンポーネントライブラリ #UIデザインシステム #フロントエンド開発 #mondayエコシステム .TypeScript

スコア : 0ポイント

ダウンロード数 : 8.4K

更新時間 : 2025-04-28

サイトを開く

Vibeデザインシステムとは？

Vibeはmonday.comが提供するReactデザインシステムで、UIコンポーネント、アイコン、スタイルガイド、開発ツールが含まれており、開発者がmonday.comのデザイン規範に沿ったアプリケーションを迅速に構築するのを支援します。

Vibeデザインシステムの使い方は？

npm/yarnでコアパッケージをインストールし、必要なコンポーネントをインポートするだけで使用を開始できます。システムには完全なドキュメントとサンプルコードが用意されています。

適用シーン

monday.comプラットフォームとUIの一貫性を保つ必要があるReactアプリケーション開発に適しており、内部ツール、プラグイン、統合アプリケーションなどに使用できます。

主要機能

コアコンポーネントライブラリ

ボタン、フォーム、ナビゲーションなどの一般的なUI要素を含む50以上の高品質Reactコンポーネントを提供します。

アイコンライブラリ

monday.comのデザインスタイルに基づく完全なアイコンセットが含まれています。

テストツール

Playwright用の専用テストツールセットです。

コード移行ツール

旧バージョンから新バージョンへの移行を自動化するツールです。

利点

monday.comプラットフォームと完全に統合され、一貫したUI体験を提供します。

充実したドキュメントとサンプルコードが用意されています。

活発なコミュニティのサポートと継続的な更新があります。

デザインからテストまでの完全なツールチェーンが含まれています。

制限

主にReact技術スタックを対象としています。

monday.com関連以外のプロジェクトでは過剰設計になる可能性があります。

小型プロジェクトにとって学習曲線が急な場合があります。

使い方

コアパッケージのインストール

npmまたはyarnを使用して@vibe/coreパッケージをインストールします。

スタイルのインポート

アプリケーションのエントリーファイルでCSS tokensをインポートします。

コンポーネントの使用

パッケージから必要なコンポーネントをインポートし、コード内で使用します。

使用例

基本ボタンの作成

VibeのButtonコンポーネントを使用して主要な操作ボタンを作成します。

アイコンの使用

ボタンにアイコンを追加します。

よくある質問

Vibe 2とVibe 3の違いは何ですか？

Vibe 2からVibe 3に移行するにはどうすればいいですか？

monday.com以外のプロジェクトでVibeを使用できますか？

🚀 Vibe設計システム

Vibe設計システムは、開発プロセスを加速し、ユーザー体験を向上させるための一連のパッケージの集合です。コンポーネント、スタイル、ガイドを提供することで、React.jsアプリケーションの構築を支援します。

🚀 クイックスタート

Vibe設計システムは、開発者がReact.jsアプリケーションを迅速に構築するのに役立つ一連のパッケージです。以下の手順に従って、システムをインストールして使用しましょう。

📦 インストール

まず、@vibe/coreパッケージをインストールします。以下のコマンドのいずれかを使用できます。

npm install @vibe/core
# または
yarn add @vibe/core

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

import "@vibe/core/tokens";

💻 使用例

基本的な使用法

ライブラリのメインエントリポイントからコンポーネントをインポートすることができます。

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

📚 ドキュメント

エコシステム

Vibe設計システムのエコシステムは、以下のパッケージで構成されています。

@vibe/core: コアコンポーネントライブラリ
@vibe/icons: アイコンライブラリ
@vibe/testkit: Playwrightテストツールキット
@vibe/codemod: コード変換ツールとCLIツール
monday-ui-style: スタイル基礎（@vibe/coreに含まれる）
vibe-storybook-components: Vibe Storybookコンポーネント
storybook-addon-playground: StorybookコンポーネントプレイグラウンドAddon

旧バージョン

Vibe 2（monday-ui-react-core）は、新機能や改善は受け取らなくなりましが、必要な重大なエラー修正は引き続き行われます。最新の改善、新コンポーネント、継続的なサポートを享受するために、移行ガイドに従って最新のバージョンであるVibe 3にアップグレードすることを強くおすすめします。

バージョン2のドキュメントについては、vibe.monday.com/v2を参照してください。