Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gravity-ui/uikit
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 · [](https://www.npmjs.com/package/@gravity-ui/uikit) [](https://github.com/gravity-ui/uikit/actions/workflows/ci.yml?query=branch:main) [](https://preview.gravity-ui.com/uikit/)
A set of flexible, highly practical, and efficient React components for creating rich web applications.

## Resources
###   [Website](https://gravity-ui.com)
###   [Documentation](https://gravity-ui.com/components/uikit/alert)
###   [Figma]()
###   [Themer](https://gravity-ui.com/themer)
###   [Storybook](https://preview.gravity-ui.com/uikit/)
###   [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.jsimport '@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.jsimport {configure} from '@gravity-ui/uikit';
configure({
lang: 'ru',
});
```## Development
To start the development server with storybook run the following:
```shell
npm start
```