Introduction
What is Bitrix24 UI?
A UI library for Bitrix24 based on Nuxt UI. This modern 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.
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 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 v4, 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 theming 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 integrates with the Nuxt ecosystem to provide a seamless development experience:
- @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
Bitrix24 UI works with any Vue project. Simply add the Vite and Vue plugins to your configuration:
- Auto-imports: Components and composables are automatically imported and available globally
- Theming System: Full theming support with customizable colors, sizes, variants, and more
- Developer Experience: Complete TypeScript support with IntelliSense and auto-completion
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
Basically, none. Bitrix24 UI is based on Nuxt UI. However, it's styled to match the overall look of Bitrix24.
Yes! Bitrix24 UI is completely free and open source under the MIT license. All 100+ components are available to everyone.
Yes! While optimized for Nuxt, Bitrix24 UI works perfectly with standalone Vue projects via our Vite plugin. You can follow the installation guide to get started.
No. Bitrix24 UI is designed exclusively for Tailwind CSS. UnoCSS support would require significant architecture changes due to different class naming conventions.
Through Reka UI integration, Bitrix24 UI provides automatic ARIA attributes, keyboard navigation, focus management, and screen reader support. While offering a strong foundation, testing in your specific use case remains important.
Bitrix24 UI ensures reliability with 1000+ Vitest tests covering core functionality and accessibility.
Yes! Bitrix24 UI is used in production by thousands of applications with extensive tests, regular updates, and active maintenance.