UIKit
UIKit · 
Набор гибких, практичных и эффективных React-компонентов для создания насыщенных веб-приложений. Часть дизайн-системы Gravity UI.
О библиотеке
UIKit — базовый пакет дизайн-системы Gravity UI: проверенный в бою набор из 70+ React-компонентов для продакшен веб-приложений. Он берёт на себя сложные части — темизацию, доступность, RTL-раскладку, серверный рендеринг и интернационализацию, — чтобы вы могли сосредоточиться на своём продукте.
Ключевые возможности:
- 70+ компонентов — поля ввода, оверлеи, отображение данных, layout-примитивы, обратная связь и многое другое
- Встроенная темизация — светлая, тёмная и высококонтрастные темы, плюс интерактивный инструмент Themer для настройки токенов
- Поддержка RTL — полноценная раскладка справа налево
Полный каталог компонентов — в Storybook и в документации.
Начало работы
Требования
В проекте должен быть установлен React 18 или 19.
Установка
npm install @gravity-ui/uikit
Использование
Импортируйте компоненты напрямую из пакета:
import {Button} from '@gravity-ui/uikit';
const SubmitButton = (
<Button view="action" size="l">
Отправить
</Button>
);
Стили
Подключите базовые стили и шрифты один раз в точке входа приложения:
// index.js
import '@gravity-ui/uikit/styles/fonts.css';
import '@gravity-ui/uikit/styles/styles.css';
Также доступен SCSS-файл с полезными миксинами для использования в ваших собственных стилях.
Руководства
Подробнее:
- Миграция на v8 — несовместимые изменения v8 и способ пройти каждое из них
- Layout-компоненты и отступы — собирать адаптивные страницы на общей сетке и шкале отступов
- Темизация — светлая, тёмная и высококонтрастные темы
- Типографика — использовать и настраивать общую шкалу текста
- Серверный рендеринг (SSR) — генерация корневого CSS-класса на сервере
- Интернационализация (I18N) — язык встроенных текстов компонентов
Точки входа
| Точка входа | Что там | Когда брать |
|---|---|---|
@gravity-ui/uikit | Компоненты, хуки и утилиты | Всегда — это и есть пакет |
@gravity-ui/uikit/styles/* | Глобальные CSS и SCSS-миксины | Один раз в точке входа приложения, см. Стили |
@gravity-ui/uikit/i18n | addLanguageKeysets, addComponentKeysets | Добавить или переопределить встроенные тексты компонентов |
@gravity-ui/uikit/server | getRootClassName | Сгенерировать корневой класс на сервере, см. SSR |
@gravity-ui/uikit/toaster-singleton | Готовый инстанс Toaster | Показывать тосты вне дерева React |
@gravity-ui/uikit/virtualizer | Virtualizer, ListVirtualizer | Рендерить только видимое окно длинного списка |
@gravity-ui/uikit/hello-pangea-dnd | ListHelloPangeaDnd, useListHelloPangeaDnd | Переупорядочивать строки списка через @hello-pangea/dnd |
@gravity-ui/uikit/unstable | Компоненты, чей API ещё меняется | На свой риск — они ломаются и вне мажорных релизов |
@gravity-ui/uikit/legacy | DropdownMenu, List, Menu, Table, TableColumnSetup | Только пока мигрируете с них, см. Миграция на v8 |
Некоторым точкам входа нужны свои пакеты — они объявлены необязательными peer-зависимостями:
поставьте их рядом с @gravity-ui/uikit, если импортируете оттуда. Всё остальное приносит сам пакет.
| Точка входа | Что поставить |
|---|---|
@gravity-ui/uikit/virtualizer | @tanstack/react-virtual |
@gravity-ui/uikit/hello-pangea-dnd | @hello-pangea/dnd |
@gravity-ui/uikit/legacy | @hello-pangea/dnd, react-window, react-virtualized-auto-sizer |
Разработка
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 # визуальные регрессионные тесты
Мейнтейнеры
 @amje |  @ValeraS |  @korvin89 |
Участие в разработке
Мы рады вашему вкладу! Пожалуйста, прочитайте CONTRIBUTING.md перед отправкой pull request. Подробные рекомендации по оформлению PR — в contribute/pull-request.md.
У нас уже 
Вопросы и обсуждения — в сообществе в Telegram.
Лицензия
Распространяется под лицензией MIT. Подробности — в файле LICENSE.
История звёзд
Если UIKit оказался вам полезен, поставьте ⭐ на GitHub — это помогает другим находить проект.
