@gravity-ui/uikit
Version:
Gravity UI base styling and components
107 lines (69 loc) • 4.5 kB
Markdown
# UIKit · [](https://www.npmjs.com/package/@gravity-ui/uikit) [](https://github.com/gravity-ui/uikit/actions/workflows/ci.yml?query=branch:main) [](https://github.com/gravity-ui/uikit/actions/workflows/test-storybook.yml) [](https://preview.gravity-ui.com/uikit/)
A set of flexible, highly practical, and efficient React components for creating rich web applications.
<!--GITHUB_BLOCK-->
## Resources
###   [Website](https://gravity-ui.com)
###   [Documentation](https://gravity-ui.com/components/uikit/alert)
###   [Figma](<https://www.figma.com/community/file/1271150067798118027/Gravity-UI-Design-System-(Beta)>)
###   [Themer](https://gravity-ui.com/themer)
###   [Storybook](https://preview.gravity-ui.com/uikit/)
###   [Community](https://t.me/gravity_ui)
<!--/GITHUB_BLOCK-->
## Install
```shell
npm install --save-dev @gravity-ui/uikit
```
## Usage
```jsx
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:
```js
// 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. Your app must be rendered inside `ThemeProvider`:
```js
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>,
);
```
It is possible to generate initial root CSS-classes during SSR to avoid theme flashing:
```js
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>
`;
```
Also, there is a SCSS [mixins](styles/mixins.scss) 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:
```js
// index.js
import {configure} from '@gravity-ui/uikit';
configure({
lang: 'ru',
});
```
## Development
To start the development server with storybook run the following:
```shell
npm start
```