@gravity-ui/uikit NPM

@gravity-ui/uikit ·

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

@bem-react/classname @gravity-ui/i18n @gravity-ui/icons @popperjs/core blueimp-md5 focus-trap lodash rc-slider react-beautiful-dnd react-copy-to-clipboard react-popper react-transition-group react-virtualized-auto-sizer react-window tabbable tslib

@infinitebrahmanuniverse/nolb-_grav @everything-registry/sub-chunk-374 ydb-embedded-ui @diplodoc/components @doc-tools/components

5 days ago

11 days ago

16 days ago

20 days ago

21 days ago

28 days ago

28 days ago

28 days ago

1 month ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

9 months ago

7 months ago

8 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

9 months ago

10 months ago

9 months ago

9 months ago

9 months ago

7 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

8 months ago

8 months ago

8 months ago

10 months ago

10 months ago

7 months ago

6 months ago

8 months ago

9 months ago

9 months ago

9 months ago

10 months ago

8 months ago

10 months ago

10 months ago

10 months ago

7 months ago

7 months ago

5 months ago

6 months ago

9 months ago

9 months ago

8 months ago

8 months ago

10 months ago

10 months ago

6 months ago

6 months ago

5 months ago

9 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago