Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Last synced: 1 day 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: 2024-10-29T11:01:31.000Z (4 months ago)
Last Synced: 2024-10-29T11:48:00.519Z (4 months ago)
Language: TypeScript
Homepage: https://gravity-ui.com
Size: 90.1 MB
Stars: 601
Watchers: 13
Forks: 90
Open Issues: 187
Metadata Files:
- Readme: README.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)](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](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/uikit/)

A set of flexible, highly practical, and efficient React components for creating rich web applications.

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

## Resources

### ![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) [Website](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) [Documentation](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) [Community](https://t.me/gravity_ui)

## Install

```shell

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

```

## Usage

```jsx

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

const SubmitButton = ;

```

### Styles

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](styles/mixins.scss) file with useful helpers to use in your app.

### I18N

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.js

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

configure({

  lang: 'ru',

});

```

## Development

To start the development server with storybook run the following:

```shell

npm start

```