Розробляєте UI-компоненти для Бітрікс24? Готові UI-кіти не враховують дизайн-систему порталу — доводиться вручну підганяти стилі, кольори та відступи. Bitrix24 UI Kit вирішує цю проблему: його React-компоненти успадковують тему порталу автоматично. Ми, команда з 5+ років досвіду, використовуємо @bitrix24/b24ui для створення інтерфейсів — від кнопок до складних дашбордів, які не відрізнити від рідних. За даними офіційної документації, використання UI Kit прискорює розробку в 2–3 рази. Отримайте консультацію — оцінимо ваш проєкт за один день. Економія на типовому проєкті — від 30 000 грн.
Які проблеми вирішує Bitrix24 UI Kit?
Стандартні UI-фреймворки вимагають ручної адаптації під тему порталу, RTL та специфіку Бітрікс24. Bitrix24 UI Kit позбавляє цього: компоненти успадковують стилі порталу, включаючи темну тему. Розробка з ним у 2–3 рази швидша, ніж написання з нуля. Вбудована підтримка RTL та багатомовності скорочує обсяг коду на третину. Завдяки готовим компонентам ви економите до 40% бюджету на розробку інтерфейсів — наприклад, на проєкті дашборду це до 40 000 грн. Використання UI Kit у 2,5 рази дешевше за індивідуальну розробку.
Як інтегрувати 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%, економія для клієнта склала 35 000 грн порівняно з альтернативою.
Порівняння: свій UI проти Bitrix24 UI Kit
| Критерій | Без UI Kit | З Bitrix24 UI Kit |
|---|---|---|
| Адаптація під тему порталу | Ручна, 2-3 дні | Автоматична, 0 днів |
| Підтримка RTL | Додаткова розробка | Вбудована |
| Консистентність | Потрібно звірятися з дизайном | Гарантована |
| Обсяг коду | Високий | Низький (компоненти готові) |
| Навчання користувачів | Потрібно | Не потрібно |
Таким чином, UI Kit у 2-3 рази ефективніший за написання з нуля.
Що входить у розробку
- Аудит вимог до інтерфейсу, складання компонентного плану
- Налаштування проєкту: @bitrix24/b24jssdk, @bitrix24/b24ui, TypeScript
- Розробка компонентів: базові (з UI Kit) + кастомні (поверх дизайн-токенів)
- Підтримка темної теми, тестування в обох варіантах
- Документування кастомних компонентів для команди підтримки
- Передача вихідного коду, інструкція з розгортання
Наша команда (5+ років досвіду) забезпечує повний цикл.
Популярні компоненти 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
Ми маємо 5+ років досвіду в Бітрікс24.
Терміни та вартість
Базовий набір екранів на UI Kit — 1–2 тижні (від 60 000 грн). Кастомна дизайн-система поверх UI Kit токенів — від 3 тижнів (від 120 000 грн). Наша команда з 5+ років досвіду реалізувала понад 20 проєктів на Бітрікс24 — гарантуємо якість та дотримання термінів. Зв'яжіться з нами для оцінки вашого проєкту за один день.