Gravity UI base styling and components
npm install @gravity-ui/uikitA set of flexible, highly practical, and efficient React components for creating rich web applications.
``shell`
npm install --save-dev @gravity-ui/uikit
`jsx
import {Button} from '@gravity-ui/uikit';
const SubmitButton = ;
`
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(
);
`
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 =
;
`Also, there is a SCSS mixins file with useful helpers to use in your app.
$3
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.jsimport {configure} from '@gravity-ui/uikit';
configure({
lang: 'ru',
});
`Development
To start the development server with storybook run the following:
`shell
git clone git@github.com:gravity-ui/uikit.git
cd uikit
npm ci
npm run start
``