About uikit

uikit is a core component library of the Consta design system, built specifically for React-based user interfaces. Developed by Gazprom Neft, this open-source toolkit provides a comprehensive collection of ready-to-use UI elements ranging from simple controls to complex data blocks, along with theming capabilities and React hooks. The library is designed to ensure visual consistency and development efficiency across web applications. It is supported by配套 resources including documentation, interactive storybook-style stands for testing component parameters, and Figma design files for seamless designer-developer collaboration. The kit is distributed via NPM and can be easily integrated into projects using Yarn or npm. Its primary use cases include rapid prototyping, building enterprise-grade dashboards, and maintaining a unified design language across multiple projects. The system operates under the MIT license, allowing free use and modification. Installation requires Node.js and Yarn, offering commands for ...

c

Published by

consta-design-system

Visit View Profile

README.md

View on GitHub

Дизайн-система Consta | Библиотека интерфейсных компонентов

Consta — дизайн-система для разработки интерфейсов, написана на React.

В дизайн-систему входит несколько библиотек. Здесь — библиотека интерфейсных компонентов: простые контролы, сложные блоки, темы и хуки. Все библиотеки представлены в виде компонентов и макетов в Figma.

Что входит в дизайн-систему

Библиотека компонентов

Репозиторий | NPM | Документация и стенд | Макеты

Библиотека графиков

Репозиторий | NPM | Документация и стенд | Макеты

>> Посмотреть все библиотеки

Подробности — на на сайте дизайн-системы Consta

Следите за новостями и релизами в телеграм-канале дизайн-системы

Как использовать

Установите пакет

yarn add @consta/uikit

Начните работу с библиотекой

Чтобы начать работу с библиотекой интерфейсных компонентов, подключите тему:

import React from 'react';
import { Theme, presetGpnDefault } from '@consta/uikit/Theme';
import { Button } from '@consta/uikit/Button';

const App = () => (
  <Theme preset={presetGpnDefault}>
    <Button label="Кнопка" />
  </Theme>
);

Что такое темы и как с ними работать

Документация и стенд

На стенде можно менять параметры и смотреть, как меняются компоненты. Документация — во вкладке у каждого компонента.

Вперёд, к стенду

Разработка

Подготовка окружения

Рабочее окружение должно содержать NodeJS и Yarn.

Чтобы установить зависимости, выполните команду:

$ yarn install

Основные команды

# Запуск локального сервера для разработки
$ yarn start

# Сборка пакета
$ yarn build

# Сборка стенда
$ yarn stand:build

# Запуск тестов
$ yarn test

Контрибьюторам

Будем рады, если вы захотите принять участие в разработке дизайн-системы =) Но сначала прочитайте инструкцию для контрибьюторов.

Лицензия

Дизайн-систему можно использовать бесплатно, она распространяется на условиях открытой лицензии MIT.

uikit