ライブラリ
コンポーネント
デザイン
アイコン
テーマ設定
ブログ
ライブラリ / UIKit

UIKit

Gravityでサービスを構築するための基本的なUIコンポーネントとトークン。
GitHubStorybook

UIKit · npm package npm downloads CI storybook tests storybook

English | Русский

リッチなWebアプリケーションを構築するための、柔軟で実用的、かつ効率的なReactコンポーネントセットです。Gravity UIデザインシステムの一部です。

About

UIKitは、Gravity UIデザインシステムの基盤となるパッケージです。本番環境のWebアプリケーション向けに構築された、実証済みの70以上のReactコンポーネントセットです。テーマ設定、アクセシビリティ、RTLレイアウト、サーバーサイドレンダリング、国際化といった難しい部分を処理するため、あなたはプロダクト構築に集中できます。

主な特徴：

  • 70以上のコンポーネント — 入力、オーバーレイ、データ表示、レイアウトプリミティブ、フィードバックなど
  • 組み込みテーマ設定 — ライト、ダーク、ハイコントラストのバリアントがあり、トークンをカスタマイズするためのライブThemerツールも利用可能
  • RTLサポート — 完全な右から左へのレイアウト方向

コンポーネントカタログの全容は、Storybookまたはドキュメントでご覧ください。

Getting Started

Prerequisites

プロジェクトにReact 16.14、17、18、または19がインストールされている必要があります。

Installation

npm install @gravity-ui/uikit

Usage

パッケージから直接コンポーネントをインポートします：

import {Button} from '@gravity-ui/uikit';

const SubmitButton = (
  <Button view="action" size="l">
    Submit
  </Button>
);

Styles

ベーススタイルとフォントは、アプリのエントリーポイントの先頭に一度だけ含めてください：

// index.js
import '@gravity-ui/uikit/styles/fonts.css';
import '@gravity-ui/uikit/styles/styles.css';

SCSSのmixinsファイルも、独自のスタイルシートで使用できる便利なヘルパーとして提供されています。

Guides

さらに読む：

  • Theming — ライト、ダーク、ハイコントラストテーマを有効にする
  • Server-side rendering — サーバーでルートCSSクラスを生成する
  • Internationalization — 組み込みコンポーネントの言語を設定する

Development

git clone git@github.com:gravity-ui/uikit.git
cd uikit
npm ci
npm run start   # Storybookを http://localhost:7007 で起動します

その他の便利なコマンド：

npm test              # 単体テストを実行します
npm run lint          # JS、SCSS、Markdownをリントします
npm run typecheck     # TypeScriptの型チェックを行います
npm run playwright    # ビジュアルリグレッションテストを実行します

Maintainers

amje
@amje		ValeraS
@ValeraS		korvin89
@korvin89

貢献について

貢献を歓迎します！プルリクエストを送信する前に、CONTRIBUTING.md をお読みください。詳細な PR ガイドラインについては、contribute/pull-request.md を参照してください。

現在 contributors 人のコントリビューターがいます — あなたも参加しませんか！

質問やディスカッションは、Telegram コミュニティでどうぞ。

ライセンス

MIT License に基づいて配布されています。詳細については LICENSE を参照してください。

AI エージェント向け

Gravity UI アプリケーションのベースとなる React コンポーネントおよびデザイン トークン ライブラリ — 他のすべての @gravity-ui パッケージが構築される基盤となるコントロール、入力、オーバーレイ、レイアウト、およびテーマ設定を提供します。

使用するケース

  • 標準的なアプリケーション UI: ボタン、フォーム コントロール、モーダルとポップアップ、メニュー、タブ、ラベル、タイポグラフィ、レイアウトのプリミティブ。
  • Gravity UI アプリのテーマ設定の基盤: ThemeProvider、デザイン トークン、および @gravity-ui/* エコシステムの他の部分が期待する CSS 変数。
  • 組み込みの Table コンポーネントを使用したシンプルな表形式データ（選択、ソート、行アクション）。

使用しないケース

  • 機能豊富なデータ グリッド（仮想化、列リサイズ、グループ化、再配置） — ヘッドレスの独立したパッケージである @gravity-ui/table を使用してください。これは uikit の Table コンポーネントとは異なります。
  • チャートとデータ可視化 — @gravity-ui/charts を使用してください（@gravity-ui/chartkit はレガシー ラッパーです）。
  • アプリケーション ナビゲーション シェル（ヘッダー、フッター、ロゴの横） — @gravity-ui/navigation を使用してください。
  • 日付ピッカー、カレンダー、範囲コントロール — @gravity-ui/date-components を使用してください。
  • SVG アイコン セット自体 — @gravity-ui/icons を使用してください。uikit は Icon レンダラーのみを提供します。

よくある落とし穴

  • Button のスタイリング プロパティは view であり、variant や color ではありません。
  • コンポーネントはセットアップなしではスタイルが適用されずにレンダリングされます。 アプリを ThemeProvider でラップし、エントリ ポイントで @gravity-ui/uikit/styles/styles.css（および fonts.css）を一度インポートしてください — 両方が必要です。
  • Icon には name プロップがありません。 インポートしたアイコン コンポーネントを data を介して渡してください: import {Gear} from '@gravity-ui/icons'; <Icon data={Gear} size={16} />。
  • theme の値は light | dark | light-hc | dark-hc です。 theme="default" はありません。

役立つドキュメント

AI エージェント向けドキュメント

インストールされているバージョンのエージェント読み取り可能なドキュメントは、node_modules/@gravity-ui/uikit/build/docs/INDEX.md にあります。

スター履歴

Star History Chart

UIKit が役立つと感じた場合は、GitHub で ⭐ を付けていただけると幸いです — プロジェクトの発見に役立ちます。

ライブラリについて
スターでライブラリを応援
スター
1017
バージョン
7.47.0
最終更新日
22.07.2026
リポジトリ
github.com/gravity-ui/uikit
ライセンス
MIT License
メンテナー
コントリビューター
+193 contributors