Skip to content

gravity-ui/uikit

Folders and files

NameName
Last commit message
Last commit date

Latest commit

3bbf810 · Jan 11, 2024
Nov 18, 2023
Sep 8, 2022
Nov 24, 2023
Dec 26, 2023
Dec 26, 2023
Jan 11, 2024
Nov 8, 2023
Jul 14, 2023
Jun 7, 2023
Sep 8, 2022
Jun 1, 2023
Dec 5, 2023
Nov 18, 2023
Jun 7, 2023
Jun 7, 2023
Mar 22, 2022
Sep 8, 2022
Sep 8, 2022
Dec 26, 2023
Apr 8, 2022
Oct 24, 2023
Dec 2, 2021
Dec 2, 2021
Dec 25, 2023
Sep 8, 2022
Dec 4, 2023
Nov 18, 2023
Dec 26, 2023
Dec 26, 2023
Dec 4, 2023
Jun 1, 2023

Repository files navigation

@gravity-ui/uikit · npm package CI storybook

A set of React components for building rich web applications.

Install

npm install --save-dev @gravity-ui/uikit

Usage

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

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

Styles

UIKit comes with base styling and theme. In order to everything look nice include this at the top of your entry file:

// index.js

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

// ...

UIKit supports different themes: light, dark and their contrast variants. The theme must be applied. To do that either wrap your app in 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>,
);

or add specific CSS-classes to the root node:

<!-- index.html -->
<html>
  <body>
    <div id="root" class="g-root g-root_theme_light"></div>
  </body>
</html>

it is possible to generate initial CSS-classes during SSR:

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

const theme = 'light';
const rootClassName = getInitialRootClassName({theme});
// index.js
import {createRoot} from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

Also, there is a SCSS mixins file with useful helpers to use in your app.

I18N

Some components contain text tokens (words and phrases). They come in two languages: en (default) and ru. To set the language use configure function:

// index.js

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

configure({
  lang: 'ru',
});

Development

To start the development server with storybook run the following:

npm start