Разрабатываете интерфейс для интеграции с Битрикс24? Готовые UI-киты не учитывают дизайн-систему портала — приходится вручную подгонять стили, цвета и отступы. Bitrix24 UI Kit решает эту проблему: его React-компоненты наследуют тему портала автоматически. Мы используем @bitrix24/b24ui для создания интерфейсов — от кнопок до сложных дашбордов, которые неотличимы от родных. Получите консультацию — оценим ваш проект за один день.
Какие проблемы решает Bitrix24 UI Kit?
Стандартные UI-фреймворки требуют ручной адаптации под тему портала, RTL и специфику Битрикс24. Bitrix24 UI Kit избавляет от этого: компоненты наследуют стили портала, включая тёмную тему. Разработка с ним идёт в 2–3 раза быстрее, чем написание с нуля. Встроенная поддержка RTL и многоязычности сокращает объём кода на треть. За счёт готовых компонентов вы экономите до 40% бюджета на разработку интерфейсов.
Как интегрировать Bitrix24 UI Kit с React?
Интеграция выполняется через пакет @bitrix24/b24ui. Он содержит готовые React-компоненты, которые автоматически подхватывают тему портала через <cite>B24ThemeProvider</cite>. Для работы с REST API используется @bitrix24/b24jssdk с полной типизацией TypeScript. Установка одного пакета заменяет ручную адаптацию каждого компонента.
import { B24ThemeProvider, Button, Input, Table } from '@bitrix24/b24ui'; Пример настройки темы и использования токенов
function App() { return ( <B24ThemeProvider> <Dashboard /> </B24ThemeProvider> ); } // Хук для работы с темой function ThemeAwareComponent() { const { theme, isDark } = useB24Theme(); return <div className={isDark ? 'dark-specific' : ''}>...</div>; } Тема синхронизируется с порталом через BX24.getTheme() и событие изменения темы — пользователь переключает тему в Битрикс24 и приложение отражает изменение мгновенно.
Как кастомизировать компоненты Bitrix24 UI Kit?
Кастомизация возможна двумя способами: через передачу пропсов (например, color, size) и через CSS-переменные дизайн-токенов. Если нужно расширить функциональность — создаёте компонент-обёртку, который наследует стили UI Kit. Дизайн-токены доступны как CSS-переменные: --b24-color-base-3, --b24-radius-md, --b24-font-family. Полный перечень в официальной документации.
Настройка и инициализация темы
Используйте B24ThemeProvider для автоматической синхронизации. Хук useB24Theme возвращает объект темы и флаг isDark. При смене темы в портале приложение обновляется без перезагрузки.
Кейс: дашборд KPI для отдела продаж (из нашей практики)
Клиент — крупный отдел продаж с 30 менеджерами. Потребовался дашборд KPI с реальными данными из CRM Битрикс24. Интерфейс должен быть стилистически неотличим от портала, поддерживать тёмную тему и работать без обучения. Использованные компоненты UI Kit: Table для таблицы менеджеров, Badge для статусов (выполнено/нет), Avatar для фото, Select для периода, Button для экспорта. Кастомные компоненты поверх UI Kit: прогресс-бар KPI (через CSS-переменные UI Kit), спарклайн-графики (Recharts со стилизацией под палитру Битрикс24), таблица рейтинга с drag-and-drop сортировкой. Данные получались через REST API CRM с использованием @bitrix24/b24jssdk. Запросы асинхронные с кэшированием. Результат: пользователи не воспринимают дашборд как стороннее приложение — интерфейс органично вписан. Время разработки сократилось на 40%, общая стоимость в 2,5 раза ниже, чем при разработке с нуля.
Сравнение: свой UI против Bitrix24 UI Kit
| Критерий | Без UI Kit | С Bitrix24 UI Kit |
|---|---|---|
| Адаптация под тему портала | Ручная, 2-3 дня | Автоматическая, 0 дней |
| Поддержка RTL | Дополнительная разработка | Встроенная |
| Консистентность | Нужно сверяться с дизайном | Гарантирована |
| Объём кода | Высокий | Низкий (компоненты готовы) |
| Обучение пользователей | Требуется | Не требуется |
Что входит в разработку
- Аудит требований к интерфейсу, составление компонентного плана
- Настройка проекта: @bitrix24/b24jssdk, @bitrix24/b24ui, TypeScript
- Разработка компонентов: базовые (из UI Kit) + кастомные (поверх дизайн-токенов)
- Поддержка тёмной темы, тестирование в обоих вариантах
- Документирование кастомных компонентов для команды поддержки
- Передача исходного кода, инструкция по развёртыванию
Популярные компоненты Bitrix24 UI Kit
| Компонент | Назначение | Пропсы для кастомизации |
|---|---|---|
| Button | Кнопка | size, color, rounded, loading |
| Input | Поле ввода | size, placeholder, error |
| Table | Таблица данных | columns, data, sortable |
| Badge | Бейдж статуса | color, size |
| Modal | Модальное окно | size, closeable, footer |
| Notification | Уведомление | type, duration |
Процесс работы
- Аналитика — изучаем требования, прототипируем
- Проектирование — определяем состав компонентов, их кастомизацию
- Реализация — пишем код, используем B24ThemeProvider
- Тестирование — проверяем все состояния (светлая/тёмная тема, RTL, многоязычность)
- Деплой — разворачиваем приложение на портале, настраиваем CI/CD
Сроки и стоимость
Базовый набор экранов на UI Kit — 1–2 недели. Кастомная дизайн-система поверх UI Kit токенов — от 3 недель. Стоимость рассчитывается индивидуально после аудита требований. За время работы реализовали более 20 проектов на Битрикс24 — гарантируем качество и соблюдение сроков. Свяжитесь с нами для оценки вашего проекта за один день.