Быстрый старт

Битрикс24 UI Kit — это не просто библиотека компонентов. Это многоуровневая система, которая позволяет адаптировать визуальный стиль Битрикс24 в зависимости от того, насколько глубоко вы хотите интегрироваться и какой стек используете.

Вы можете использовать UI Kit как:

1. Полноценную библиотеку Vue-компонентов, рекомендуем этот вариант.
2. Источник дизайн-токенов на Tailwind CSS и дополнительно библиотеку иконок, совместимую с любым фронтенд-стеком.

Уровень 1: Полная интеграция через VueУровень 1: Полная интеграция через Vue

Если вы используете Vue 3 — вы получаете максимум: готовые компоненты, полностью оформленные в стиле Битрикс24, с поддержкой тем, адаптивности, кастомизации и UX-логики, проверенной на миллионах пользователей.

Вы можете выбрать один из двух вариантов запуска проекта:

• Nuxt 3 — идеален для SSR, мультистраничных приложений и быстрой интеграции с инфраструктурой Битрикс24.
• Vite — простота, скорость и легкость для SPA и микросервисной архитектуры.

Мы поддерживаем оба варианта. Выбирайте тот, который соответствует вашим задачам.

Почему Nuxt?Почему Nuxt?

• Отлично подходит для приложений с навигацией, локализацией и модульной структурой.
• SSR/SSG из коробки — все хорошо с производительностью.
• Поддержка middleware, layout'ов и composables.

Почему Vite?Почему Vite?

• Молниеносный старт и dev server.
• Простая конфигурация.
• Идеально для встраиваемых виджетов, одностраничников, microfrontend-проектов.

Уровень 2: Только дизайн-токеныУровень 2: Только дизайн-токены

Если вы не используете Vue, но все равно хотите, чтобы ваш интерфейс выглядел как родной Битрикс24 — используйте нашу систему дизайн-токенов, реализованную как Tailwind CSS плагин.

Дизайн-токены содержат:

• цветовую палитру Битрикс24, включая светлую и темную темы,
• типографику,
• отступы, размеры, бордеры,
• готовые утилиты для UI-паттернов Битрикс24.

Почему Tailwind CSS?Почему Tailwind CSS?

• Tailwind CSS дает мощный и гибкий способ описывать интерфейс через классы, без необходимости писать CSS вручную.
• Легкая интеграция в любой стек: React, Vue, Svelte, даже jQuery.
• Возможность быстрого прототипирования и масштабирования компонентов.
• Используется тысячами команд.

ИконкиИконки

Вам нужны только иконки в фирменном стиле Битрикс24? Подключите @bitrix24/icons — и используйте SVG-иконки в любом фреймворке. Все иконки оптимизированы, доступны через CSS-классы или как Vue/React-компоненты.

Старт проекта на NuxtСтарт проекта на Nuxt

Проще и правильнее всего, начиная проект с использованием Nuxt 3, использовать «заготовку», которая включает в себя все необходимые зависимости и настройки. Подробное описание и пример можно найти в документации.

Старт проекта на ViteСтарт проекта на Vite

Аналогично «заготовке» для Nuxt, вы можете использовать вариант для Vite. Он также включает в себя все необходимые зависимости и настройки. Подробное описание и пример можно найти в документации.