UIKit ·

一套灵活、实用且高效的 React 组件，用于构建丰富的 Web 应用。作为 Gravity UI 设计系统的一部分。

关于

UIKit 是 Gravity UI 设计系统的基础包——一个经过实战检验的、包含 70 多个 React 组件的集合，专为生产级 Web 应用而构建。它处理了棘手的问题：主题化、可访问性、RTL 布局、服务器端渲染和国际化，让您可以专注于构建您的产品。

主要特点：

70 多个组件 — 输入框、覆盖层、数据展示、布局基元、反馈等
内置主题化 — 提供浅色、深色和高对比度变体，并附带实时 Themer 工具来自定义令牌
RTL 支持 — 完全支持从右到左的布局方向

您可以在 Storybook 或文档中浏览完整的组件目录。

入门

前提条件

您的项目必须已安装 React 16.14、17、18 或 19。

安装

npm install @gravity-ui/uikit

用法

直接从包中导入组件：

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

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

样式

在您的应用入口文件顶部一次性引入基础样式和字体：

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

还提供了一个 SCSS mixins 文件，其中包含有用的辅助函数，供您在自己的样式表中使用。

指南

阅读更多：

主题化 — 启用浅色、深色和高对比度主题
服务器端渲染 — 在服务器上生成根 CSS 类
国际化 — 设置内置组件的语言

开发

git clone git@github.com:gravity-ui/uikit.git
cd uikit
npm ci
npm run start   # 在 http://localhost:7007 启动 Storybook

其他常用命令：

npm test              # 运行单元测试
npm run lint          # 检查 JS、SCSS 和 Markdown 代码风格
npm run typecheck     # TypeScript 类型检查
npm run playwright    # 运行视觉回归测试

维护者

_@amje

_@ValeraS

_@korvin89

贡献

欢迎贡献！在提交 Pull Request 之前，请阅读 CONTRIBUTING.md。有关详细的 PR 指南，请参阅 contribute/pull-request.md。

我们有位贡献者，并且还在不断增加 — 加入我们吧！

加入我们的 Telegram 社区，进行提问和讨论。

许可证

在 MIT 许可证下分发。详情请参阅 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 是旧版包装器）。
应用导航外壳（侧边栏、页眉、页脚、Logo）— 请使用 @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

如果您觉得 UIKit 有用，请考虑在 GitHub 上给它一个 ⭐ — 这有助于其他人发现该项目。

UIKit

§UIKit ·

§关于

§入门

§前提条件

§安装

§用法

§样式

§指南

§开发

§维护者

§贡献

§许可证

§供 AI 代理使用

§何时使用

§何时避免使用

§常见陷阱

§有用的文档

§供 AI 代理使用的文档

§Star History