Kontur UI

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

• Документация
• Быстрый старт
• Темизатор
• Контур.Гайды

Установка

npm i @skbkontur/react-ui

Для изучения компонентов дизайн-системы без установки, вы можете воспользоваться одной из готовых песочниц с настроенными Vite/Webpack/Next.js.

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

В библиотеке собраны полностью готовые компоненты, разработчики могут использовать их как есть с гибкой настройкой вида или поведения. Про кастомизацию, адаптивность, a11y, локали Ru/En, валидации компонентов и другие возможности более подробно в документации.

import { Button } from '@skbkontur/react-ui/components/Button';

export function Page() {
  return (
    <Button size="medium" onClick={() => console.log('Создать отчёт')}>
      Создать отчёт
    </Button>
  );
}

Другие npm-пакеты Kontur UI

Это основной пакет со всеми компонентами. Его можно использовать не только внутри экосистемы Контура, но и в любых проектах с указанием авторства. Другие пакеты, содержащие элементы фирменного стиля, доступны только для проектов Контура или партнеров.

Пакет	Описание	NPM
@skbkontur/react-ui	Базовый набор контролов для дизайна продуктов Контура
@skbkontur/react-ui-validations	Библиотека для реализации поведения валидаций и отображения ошибок
@skbkontur/react-ui-addons	Дополнения: Logotype, TopBar, UserAvatar
@skbkontur/side-menu	Боковое меню сервисов Контура
@skbkontur/logos	Логотипы продуктов Контура
@skbkontur/icons	Набор интерфейсных иконок
@skbkontur/ui-cdn-components	Компоненты для работы с ресурсами сервера статики
@skbkontur/typography	Стили текста для шрифта Lab Grotesque K
@skbkontur/colors	Библиотека цветов Контура
@skbkontur/react-error-pages	HTML-шаблоны и компоненты страниц ошибок
@skbkontur/empty-state	Заглушки для пустых состояний
@skbkontur/mass-actions-panel	Плашка массовых действий
@skbkontur/hidden-links	Скрытые ссылки, доступные через Tab и скринридеры
@skbkontur/mini-skeleton	SVG-заглушки для состояния загрузки контента
@skbkontur/table	Компоненты и хуки для вёрстки сложных таблиц

Поддерживаемые версии

Библиотека совместима с React 16.9–19.x и поддерживает браузеры:

• Chrome ≥ 64
• Firefox ≥ 69
• Safari ≥ 11.1

---

Библиотека Kontur UI — это открытый проект и результат совместных усилий большого количества людей. Мы ценим вклад каждого и приглашаем принять участие в его развитии. Подробнее в разделе CONTRIBUTING.md.