Developing UI components with Bitrix24 UI Kit (React)

Building UI Components with Bitrix24 UI Kit (React)

Applications embedded in a Bitrix24 portal that look "foreign" are a persistent problem. Custom fonts, non-standard buttons, hand-rolled modals — users perceive such applications as an external service rather than part of their work environment. Bitrix24 UI Kit addresses this: a set of React components that accurately reproduce the Bitrix24 visual language, including dark theme and RTL locale support.

Bitrix24 UI Kit Structure

The official @bitrix24/b24jssdk package contains a TypeScript SDK for the REST API. UI components in the Bitrix24 ecosystem are delivered in two ways: via BX.UI.* in Bitrix templates (vanilla JS) and via React components in @bitrix24/b24ui for applications.

Core component set:

import {
  Button, ButtonSize, ButtonColor,
  Input, InputSize,
  Select, SelectSize,
  Table, TableColumn,
  Badge, BadgeColor,
  Modal, ModalSize,
  Notification, NotificationType,
  Avatar, AvatarSize,
  Chip, ChipColor,
} from '@bitrix24/b24ui';

Components use CSS variables from the portal theme. When the theme changes (light/dark), all components update automatically without additional logic.

Theme Setup and Initialization

import { B24ThemeProvider, useB24Theme } from '@bitrix24/b24ui';

function App() {
  return (
    <B24ThemeProvider>
      <AppContent />
    </B24ThemeProvider>
  );
}

// Hook for theme-aware rendering
function ThemeAwareComponent() {
  const { theme, isDark } = useB24Theme();
  // theme: 'light' | 'dark' | 'auto'
  return <div className={isDark ? 'dark-specific' : ''}> ... </div>;
}

The theme synchronizes with the portal via BX24.getTheme() and the theme-change event — when the user switches the theme in Bitrix24, the application reflects the change instantly.

Case Study: KPI Dashboard for a Sales Team

The application displays manager KPIs in real time: call counts, meetings, active deals, funnel conversion. Data comes from the Bitrix24 CRM via REST API plus a custom aggregation backend.

Requirement: the interface must look like part of Bitrix24, support both themes, and be immediately understandable without training.

UI Kit components used: Table for the manager list, Badge for statuses (met/not met), Avatar for employee photos, Select for period selection, Button for export.

Custom components built on top of the UI Kit: KPI progress bar (using UI Kit CSS variables for colors), sparkline charts (Recharts styled to match the Bitrix24 palette), a ranking table with drag-and-drop column sorting.

Result: users do not perceive the dashboard as a "third-party app" — the interface integrates naturally into the portal workspace.

Customizing and Extending Components

The UI Kit does not cover every scenario. For custom components, design tokens from the system are used via CSS variables:

.custom-card {
  background:    var(--b24-color-base-3);
  border:        1px solid var(--b24-color-base-50);
  border-radius: var(--b24-radius-md);
  color:         var(--b24-color-base-90);
  font-family:   var(--b24-font-family);
}

The token list is available in the UI Kit documentation. Using tokens instead of hardcoded values is mandatory for correct behavior across all themes.

Table Component with Sorting

const columns: TableColumn<Manager>[] = [
  {
    key:    'name',
    title:  'Manager',
    render: (row) => (
      <div className="flex items-center gap-2">
        <Avatar src={row.photo} name={row.name} size={AvatarSize.XS} />
        <span>{row.name}</span>
      </div>
    ),
    sortable: true,
  },
  {
    key:    'deals',
    title:  'Deals',
    render: (row) => (
      <Badge
        color={row.deals >= row.target ? BadgeColor.Success : BadgeColor.Warning}
        label={`${row.deals} / ${row.target}`}
      />
    ),
    sortable: true,
  },
];

<Table
  columns={columns}
  rows={managersData}
  onSort={(key, direction) => setSortConfig({ key, direction })}
  loading={isLoading}
/>

Scope of Work

• Requirements audit, component plan
• Project setup: @bitrix24/b24jssdk, @bitrix24/b24ui, TypeScript
• Component development: standard (from UI Kit) + custom (on top of design tokens)
• Dark theme support, testing in both variants
• Documentation of custom components for the support team

Timeline: a basic screen set using the UI Kit — 1–2 weeks. A custom design system built on top of UI Kit tokens — from 3 weeks.