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.