Components and Templates

Bitrix24 UI Kit is a library of design-consistent components that can be combined, extended, and adapted to specific tasks. Its main goal is to speed up development and to keep interfaces consistent across all applications embedded in Bitrix24.

This page helps you choose ready-made elements for an application screen: it shows the categories the library is split into, what each of them holds, and which ready-made project templates exist. Descriptions of individual components, their parameters, and live examples stay in the library documentation.

Quick links: Component Categories

What You Need to Get StartedWhat You Need to Get Started

The library components are Vue components, and they run on Vue 3. There are two ways to start a project: with Nuxt or with Vue and Vite.

If your application is not written in Vue, the components are not suitable. For a different front end, UI Kit provides design tokens as a Tailwind CSS plugin and a library of icons — these are compatible with any stack. Both options are covered in the Quick Start: Connecting the UI Kit to a Project article.

How to Use a ComponentHow to Use a Component

Once the library is connected, a component is called in the template by its name with the B24 prefix:

<template>
          <B24Button>Button</B24Button>
        </template>
        

In the library documentation, component names are given without the prefix: the Button section describes the B24Button component.

Component CategoriesComponent Categories

The library splits components into 13 categories. The table gives a few components from each one; the full contents of a category are available in the library documentation.

Project TemplatesProject Templates

Besides individual components, the library provides ready-made project starters. There are two of them, each in a version for Nuxt and for Vue:

• Starter — a minimal project with UI Kit connected, suitable for a single-page application or a widget
• Dashboard — a project with a side menu, a panel, and a working area, suitable for an application with several sections

The template sources and the launch instructions are available in the templates section.

Component ApproachComponent Approach

The library components:

• are built on the principle of composition — they combine with each other without extra wiring,
• support theming — the appearance can be adjusted to the light or dark theme,
• are responsive — they look right at different resolutions,
• are extensible — through slots and props.

An interface is assembled from ready-made parts, and there is no need to describe visual styles manually.

Default BehaviorDefault Behavior

UI Kit implements the behavior a Bitrix24 user is accustomed to:

• paddings, alignment, and grids — as in the core platform,
• the logic of opening and closing modals, slide-outs, and dropdowns — matching the platform,
• keyboard and focus interaction — following accessibility standards.

You do not need to guess how a component behaves: it is already aligned with the UX patterns of Bitrix24.

Continue Your ExplorationContinue Your Exploration

• Quick Start: Connecting the UI Kit to a Project
• Principles of the Bitrix24 UI Kit Design
• Integration of UI Kit with REST API and Business Logic
• Bitrix24 UI Kit: Overview