Набор гибких, универсальных и высокоэффективных React-компонентов для создания сложных веб-приложений.
npm install --save-dev @gravity-ui/uikitimport React from 'react';
import {Button} from '@gravity-ui/uikit';
const SubmitButton = <Button view="action" size="l" />;UIKit включает в себя базовое стилизованное оформление и тему. Чтобы подключить их, добавьте следующий фрагмент кода в начало точки входа приложения:
// index.js
import '@gravity-ui/uikit/styles/fonts.css';
import '@gravity-ui/uikit/styles/styles.css';
// ...UIKit поддерживает несколько тем: светлая, темная и их контрастные версии. Приложение должно быть отрисовано внутри компонента ThemeProvider:
import {createRoot} from 'react-dom/client';
import {ThemeProvider} from '@gravity-ui/uikit';
const root = createRoot(document.getElementById('root'));
root.render(
<ThemeProvider theme="light">
<App />
</ThemeProvider>,
);Для предотвращения мигания темы можно сгенерировать исходные CSS-классы для корневого элемента во время серверного рендеринга.
import {getRootClassName} from '@gravity-ui/uikit/server';
const theme = 'dark';
const rootClassName = getRootClassName({theme});
const html = `
<html>
<body>
<div id="root" class="${rootClassName}"></div>
</body>
</html>
`;Также предусмотрен файл с SCSS-миксинами, которые можно использовать в приложении.
Некоторые компоненты содержат текстовые токены (слова и фразы), доступные на двух языках: en (по умолчанию) и ru.
Для настройки языка используйте функцию configure:
// index.js
import {configure} from '@gravity-ui/uikit';
configure({
lang: 'ru',
});Для запуска Storybook в режиме разработки выполните следующую команду:
npm start