Skip to content

gravity-ui/uikit

Folders and files

NameName
Last commit message
Last commit date
Mar 25, 2024
Feb 6, 2024
Apr 8, 2024
Mar 26, 2024
Mar 26, 2024
Apr 19, 2024
Apr 12, 2024
Apr 17, 2024
Jun 7, 2023
Mar 25, 2024
Jun 1, 2023
Feb 6, 2024
Nov 18, 2023
Jun 7, 2023
Jun 7, 2023
Mar 22, 2022
Sep 8, 2022
Feb 6, 2024
Apr 18, 2024
Apr 2, 2024
Dec 2, 2021
Dec 2, 2021
Dec 25, 2023
Sep 8, 2022
Mar 11, 2024
Nov 18, 2023
Apr 18, 2024
Apr 18, 2024
Feb 6, 2024
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