Kontur UI

April 20, 2026 · View on GitHub

Набор готовых 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Базовый набор контролов для дизайна продуктов КонтураNPM Version
@skbkontur/react-ui-validationsБиблиотека для реализации поведения валидаций и отображения ошибокNPM Version
@skbkontur/react-ui-addonsДополнения: Logotype, TopBar, UserAvatarNPM Version
@skbkontur/side-menuБоковое меню сервисов КонтураNPM Version
@skbkontur/logosЛоготипы продуктов КонтураNPM Version
@skbkontur/iconsНабор интерфейсных иконокNPM Version
@skbkontur/ui-cdn-componentsКомпоненты для работы с ресурсами сервера статикиNPM Version
@skbkontur/typographyСтили текста для шрифта Lab Grotesque KNPM Version
@skbkontur/colorsБиблиотека цветов КонтураNPM Version
@skbkontur/react-error-pagesHTML-шаблоны и компоненты страниц ошибокNPM Version
@skbkontur/empty-stateЗаглушки для пустых состоянийNPM Version
@skbkontur/mass-actions-panelПлашка массовых действийNPM Version
@skbkontur/hidden-linksСкрытые ссылки, доступные через Tab и скринридерыNPM Version
@skbkontur/mini-skeletonSVG-заглушки для состояния загрузки контентаNPM Version
@skbkontur/tableКомпоненты и хуки для вёрстки сложных таблицNPM Version

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

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

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

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