UIKit

English | Русский

Набор гибких, практичных и эффективных React-компонентов для создания насыщенных веб-приложений. Часть дизайн-системы Gravity UI.

Сайт    Документация    Figma    Themer    Storybook    Сообщество

О библиотеке

UIKit — базовый пакет дизайн-системы Gravity UI: проверенный в бою набор из 70+ React-компонентов для продакшен веб-приложений. Он берёт на себя сложные части — темизацию, доступность, RTL-раскладку, серверный рендеринг и интернационализацию, — чтобы вы могли сосредоточиться на своём продукте.

Ключевые возможности:

• 70+ компонентов — поля ввода, оверлеи, отображение данных, layout-примитивы, обратная связь и многое другое
• Встроенная темизация — светлая, тёмная и высококонтрастные темы, плюс интерактивный инструмент 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">
    Отправить
  </Button>
);

Стили

Подключите базовые стили и шрифты один раз в точке входа приложения:

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

Также доступен SCSS-файл с полезными миксинами для использования в ваших собственных стилях.

Руководства

Подробнее:

• Layout-компоненты и отступы — собирать адаптивные страницы на общей сетке и шкале отступов
• Темизация — светлая, тёмная и высококонтрастные темы
• Типографика — использовать и настраивать общую шкалу текста
• Серверный рендеринг (SSR) — генерация корневого CSS-класса на сервере
• Интернационализация (I18N) — язык встроенных текстов компонентов

Разработка

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 — это помогает другим находить проект.