https://github.com/gravity-ui/uikit

https://github.com/gravity-ui/uikit

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/gravity-ui/uikit
• Owner: gravity-ui
• License: mit
• Created: 2021-11-09T13:28:54.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2025-05-13T12:47:00.000Z (2 months ago)
• Last Synced: 2025-05-13T13:25:26.399Z (2 months ago)
• Language: TypeScript
• Homepage: https://gravity-ui.com
• Size: 126 MB
• Stars: 766
• Watchers: 13
• Forks: 105
• Open Issues: 123
• Metadata Files:
  • Readme: README-ru.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Codeowners: CODEOWNERS

Awesome Lists containing this project

README

        
# UIKit · [![npm package](https://img.shields.io/npm/v/@gravity-ui/uikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/uikit) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/ci.yml?branch=main&label=CI&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/ci.yml?query=branch:main) [![storybook tests](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/test-storybook.yml?label=Storybook%20Tests&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/test-storybook.yml) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685?logo=storybook)](https://preview.gravity-ui.com/uikit/)

Набор гибких, универсальных и высокоэффективных React-компонентов для создания сложных веб-приложений.

![Cover image](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/uikit_cover.png)

## Ресурсы

### ![Globe Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_light.svg#gh-light-mode-only) ![Globe Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_dark.svg#gh-dark-mode-only) [Веб-сайт](https://gravity-ui.com)

### ![Documentation Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_light.svg#gh-light-mode-only) ![Documentation Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_dark.svg#gh-dark-mode-only) [Документация](https://gravity-ui.com/components/uikit/alert)

### ![Figma Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_light.svg#gh-light-mode-only) ![Figma Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_dark.svg#gh-dark-mode-only) [Figma]()

### ![Themer Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_light.svg#gh-light-mode-only) ![Themer Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_dark.svg#gh-dark-mode-only) [Themer](https://gravity-ui.com/themer)

### ![Storybook Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_light.svg#gh-light-mode-only) ![Storybook Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_dark.svg#gh-dark-mode-only) [Storybook](https://preview.gravity-ui.com/uikit/)

### ![Community Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_light.svg#gh-light-mode-only) ![Community Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_dark.svg#gh-dark-mode-only) [Сообщество](https://t.me/gravity_ui)

## Установка

```shell

npm install --save-dev @gravity-ui/uikit

```

## Использование

```jsx

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

const SubmitButton = ;

```

### Стили

UIKit включает в себя базовое стилизованное оформление и тему. Чтобы подключить их, добавьте следующий фрагмент кода в начало точки входа приложения:

```js

// index.js

import '@gravity-ui/uikit/styles/fonts.css';

import '@gravity-ui/uikit/styles/styles.css';

// ...

```

UIKit поддерживает несколько тем: светлая, темная и их контрастные версии. Приложение должно быть отрисовано внутри компонента `ThemeProvider`:

```js

import {createRoot} from 'react-dom/client';

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

const root = createRoot(document.getElementById('root'));

root.render(

  

    

  ,

);

```

Для предотвращения мигания темы можно сгенерировать исходные CSS-классы для корневого элемента во время серверного рендеринга.

```js

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

const theme = 'dark';

const rootClassName = getRootClassName({theme});

const html = `

  

    


  


`;

```

Также предусмотрен файл с SCSS-[миксинами](styles/mixins.scss), которые можно использовать в приложении.

### I18N

Некоторые компоненты содержат текстовые токены (слова и фразы), доступные на двух языках: `en` (по умолчанию) и `ru`.

Для настройки языка используйте функцию `configure`:

```js

// index.js

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

configure({

  lang: 'ru',

});

```

## Разработка

Для запуска Storybook в режиме разработки выполните следующую команду:

```shell

npm start

```