@gravity-ui/uikit
Advanced tools
A set of flexible, highly practical, and efficient React components for creating rich web applications.
Website
Documentation
Figma
Themer
Storybook
Community
npm install --save-dev @gravity-ui/uikit
import {Button} from '@gravity-ui/uikit';
const SubmitButton = <Button view="action" size="l" />;
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. Your app must be rendered inside 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>,
);
It is possible to generate initial root CSS-classes during SSR to avoid theme flashing:
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 file with useful helpers to use in your app.
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',
});
To start the development server with storybook run the following:
git clone git@github.com:gravity-ui/uikit.git
cd uikit
npm ci
npm run start
FAQs
Gravity UI base styling and components
The npm package @gravity-ui/uikit receives a total of 9,879 weekly downloads. As such, @gravity-ui/uikit popularity was classified as popular.
We found that @gravity-ui/uikit demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.