Introduction

Bitrix24 UI is a comprehensive Vue UI component library (Nuxt optional), offering 100+ accessible, Tailwind CSS components for building modern web applications.

What is Bitrix24 UI?

A Vue UI library for Bitrix24 based on Nuxt UI. This modern Vue UI library, based on Reka UI, Tailwind CSS, and Tailwind Variants, allows you to create beautiful and accessible applications with over 100 ready-to-use components.

If you're building a Vue project with Tailwind CSS, Bitrix24 UI is a great default choice. It provides high-level, ready-to-use components (data tables, forms, overlays, navigation) while still allowing advanced customization when needed.

Developer Experience First

Intuitive APIs, excellent TypeScript support, auto-completion, and comprehensive docs.

Beautiful by Default

A modern, clean design out of the box with a theme you can adapt in minutes.

Accessible by Default

WAI-ARIA compliant with keyboard navigation, focus management, and screen reader support.

Production Ready

100+ battle-tested components including data tables, forms, overlays, and navigation used by thousands of applications in production.

What's new in v2?

We support almost all components of Nuxt UI v4.

Read more in the migration guide.

Core technologies

Reka UI

Bitrix24 UI is built on top of Reka UI as a foundation for the components:

  • WAI-ARIA Compliance: Follows WAI-ARIA authoring practices with proper semantics and roles
  • Keyboard Navigation: Built-in keyboard support for complex components like tabs and dialogs
  • Focus Management: Intelligent focus handling that moves focus based on user interactions
  • Accessible Labels: Abstractions to simplify labeling controls for screen readers

Tailwind CSS

Bitrix24 UI integrates the latest Tailwind CSS, bringing significant improvements:

  • 5x Faster Builds: Full builds up to 5x faster, incremental builds over 100x faster
  • Unified Toolchain: Built-in import handling, vendor prefixing, and syntax transforms
  • CSS-first Configuration: Customize and extend directly in CSS instead of JavaScript
  • Modern Web Features: Container queries, cascade layers, wide-gamut colors, and more

Tailwind Variants

Bitrix24 UI takes advantage of Tailwind Variants to provide a powerful design system:

  • Dynamic Styling: Flexible component variants with a powerful API
  • Type Safety: Full TypeScript support with auto-completion
  • Conflict Resolution: Efficient merging of conflicting styles

Key features

Ecosystem integration

Bitrix24 UI is SSR compatible and integrates seamlessly with the Nuxt ecosystem (these features also work in Vue with additional configuration):

  • @bitrix24/b24icons: Bitrix24 Icons for Web Applications
  • Color Mode: Dark and Light mode with auto-detection
  • i18n: Internationalize your components with 50+ languages
  • Content: Beautiful typography out of the box

Vue compatibility (Nuxt optional)

Bitrix24 UI works with any Vue project, not just Nuxt. Simply add the Vite and Vue plugins to your configuration:

  • Auto-imports: Components and composables are automatically imported and available globally
  • Design System: Full theming support with customizable colors, sizes, variants, and more
  • Developer Experience: Complete TypeScript support with IntelliSense and auto-completion
Learn how to install and configure Bitrix24 UI in a Vue project in the Vue installation guide.

TypeScript Support

Bitrix24 UI provides comprehensive TypeScript integration for a superior developer experience:

  • Auto-completion: For all component props, slots, and events
  • Generic Components: Using Vue Generics
  • Type-safe Theming: In app.config.ts
  • IntelliSense: Throughout your entire codebase

FAQ

Releases
Published under MIT License.

Copyright © 2024-present Bitrix24