ライブラリ
コンポーネント
デザイン
アイコン
テーマ設定
ブログ
ライブラリ / 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

さらに読む：

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 をお読みください。詳細なプルリクエストガイドラインについては、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 で ⭐ を付けていただけると幸いです。プロジェクトの発見に役立ちます。

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