UIKit ·

English | Русский

A set of flexible, highly practical, and efficient React components for creating rich web applications. Part of the Gravity UI design system.

Website    Documentation    Figma    Themer    Storybook    Community

About

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.

Getting Started

Prerequisites

React 16.14, 17, 18, or 19 must be installed in your project.

Installation

npm install @gravity-ui/uikit

Usage

Import components directly from the package:

import {Button} from '@gravity-ui/uikit';

const SubmitButton = (
  <Button view="action" size="l">
    Submit
  </Button>
);

Styles

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.

Guides

Read more:

• Layout components and spacings — compose responsive pages with the shared grid and spacing scale
• Theming — enable light, dark, and high-contrast themes
• Typography — use and customize the shared text scale
• Server-side rendering — generate the root CSS class on the server
• Internationalization — set the built-in component language

Development

git clone [email protected]:gravity-ui/uikit.git
cd uikit
npm ci
npm run start   # launches Storybook at http://localhost:7007

Other 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

Maintainers

Contributing

Contributions are welcome! Please read CONTRIBUTING.md before submitting a pull request. For detailed PR guidelines see contribute/pull-request.md.

We have contributors and counting — join us!

Join the community on Telegram for questions and discussion.

License

Distributed under the MIT License. See LICENSE for details.

For AI agents

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.

When to use

• 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 Table component (selection, sorting, row actions).

When not to use

• Feature-rich data grids (virtualization, column resizing, grouping, reordering) — use @gravity-ui/table, a separate headless package. It is not the same as uikit's Table component.
• Charts and data visualization — use @gravity-ui/charts (@gravity-ui/chartkit is 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 the Icon renderer.

Common pitfalls

• Button styling prop is view, not variant or color
• Components render unstyled without setup. Wrap the app in ThemeProvider and import @gravity-ui/uikit/styles/styles.css (plus fonts.css) once at the entry point — both are required.
• Icon has no name prop. Pass an imported icon component through data: import {Gear} from '@gravity-ui/icons'; <Icon data={Gear} size={16} />.
• theme values are light | dark | light-hc | dark-hc. There is no theme="default".

Useful docs

• Layout components and spacings
• Theming, Colors & Branding
• Typography

Documentation for AI agents

Agent-readable documentation for the installed version is located in node_modules/@gravity-ui/uikit/build/docs/INDEX.md.

Star History

---

If you find UIKit useful, please consider giving it a ⭐ on GitHub — it helps others discover the project.