A set of flexible, highly practical, and efficient React components for creating rich web applications. Part of the Gravity UI design system.
UIKit is the foundational package of the Gravity UI design system — a battle-tested set of 70+ React components built for production web applications. It handles the hard parts: theming, accessibility, RTL layout, server-side rendering, and internationalization, so you can focus on building your product.
Key features:
- 70+ components — inputs, overlays, data display, layout primitives, feedback, and more
- Built-in theming — light, dark, and high-contrast variants with a live Themer tool to customize tokens
- RTL support — full right-to-left layout direction
Browse the full component catalog in Storybook or the documentation.
React 16.14, 17, 18, or 19 must be installed in your project.
npm install @gravity-ui/uikitImport components directly from the package:
import {Button} from '@gravity-ui/uikit';
const SubmitButton = (
<Button view="action" size="l">
Submit
</Button>
);Include the base styles and fonts once at the top of your app entry point:
// index.js
import '@gravity-ui/uikit/styles/fonts.css';
import '@gravity-ui/uikit/styles/styles.css';A SCSS mixins file with useful helpers is also available for use in your own stylesheets.
Read more:
- Theming — enable light, dark, and high-contrast themes
- Server-side rendering — generate the root CSS class on the server
- Internationalization — set the built-in component language
git clone git@github.com:gravity-ui/uikit.git
cd uikit
npm ci
npm run start # launches Storybook at http://localhost:7007Other useful commands:
npm test # run unit tests
npm run lint # lint JS, SCSS, and Markdown
npm run typecheck # TypeScript type-check
npm run playwright # run visual regression tests
 @amje |
 @ValeraS |
 @korvin89 |
Contributions are welcome! Please read CONTRIBUTING.md before submitting a pull request. For detailed PR guidelines see contribute/pull-request.md.
We have 
Join the community on Telegram for questions and discussion.
Distributed under the MIT License. See LICENSE for details.
The base React component and design-token library for Gravity UI apps — controls, inputs, overlays, layout, and theming that every other @gravity-ui package builds on.
- Standard application UI: buttons, form controls, modals and popups, menus, tabs, labels, typography, and layout primitives.
- The theming foundation of a Gravity UI app:
ThemeProvider, design tokens, and CSS variables the rest of the@gravity-ui/*ecosystem expects to be present. - Simple tabular data via the built-in
Tablecomponent (selection, sorting, row actions).
- Feature-rich data grids (virtualization, column resizing, grouping, reordering) — use
@gravity-ui/table, a separate headless package. It is not the same as uikit'sTablecomponent. - Charts and data visualization — use
@gravity-ui/charts(@gravity-ui/chartkitis the legacy wrapper). - Application navigation shells (aside header, footer, logo) — use
@gravity-ui/navigation. - Date pickers, calendars, and range controls — use
@gravity-ui/date-components. - The SVG icon set itself — use
@gravity-ui/icons; uikit only ships theIconrenderer.
Buttonstyling prop isview, notvariantorcolor- Components render unstyled without setup. Wrap the app in
ThemeProviderand import@gravity-ui/uikit/styles/styles.css(plusfonts.css) once at the entry point — both are required. Iconhas nonameprop. Pass an imported icon component throughdata:import {Gear} from '@gravity-ui/icons'; <Icon data={Gear} size={16} />.themevalues arelight | dark | light-hc | dark-hc. There is notheme="default".
Agent-readable documentation for the installed version is located in node_modules/@gravity-ui/uikit/build/docs/INDEX.md.
If you find UIKit useful, please consider giving it a ⭐ on GitHub — it helps others discover the project.