Bitrix24 UI

Bitrix24 UI Kit for building REST-API web applications with Nuxt & Vue

Find more details in the documentation

Documentation

Visit https://bitrix24.github.io/b24ui/ to explore the documentation.

Installation

pnpm add @bitrix24/b24ui-nuxt @bitrix24/b24icons-vue tailwindcss

yarn add @bitrix24/b24ui-nuxt @bitrix24/b24icons-vue tailwindcss

npm install @bitrix24/b24ui-nuxt @bitrix24/b24icons-vue tailwindcss

bun add @bitrix24/b24ui-nuxt @bitrix24/b24icons-vue tailwindcss

Nuxt

1. Add the Bitrix24 UI module in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@bitrix24/b24ui-nuxt'],
  css: ['~/assets/css/main.css']
})

2. Import Tailwind CSS and Bitrix24 UI in your CSS:

@import "tailwindcss";
@import "@bitrix24/b24ui-nuxt";

Learn more in the installation guide.

Vue

1. Add the Bitrix24 UI Vite plugin in your vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite()
  ]
})

2. Use the Bitrix24 UI Vue plugin in your main.ts:

import './assets/css/main.css'

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import b24UiPlugin from '@bitrix24/b24ui-nuxt/vue-plugin'
import App from './App.vue'

const app = createApp(App)

const router = createRouter({
  routes: [],
  history: createWebHistory()
})

app.use(router)
app.use(b24UiPlugin)

app.mount('#app')

3. Import Tailwind CSS and Bitrix24 UI in your CSS:

@import "tailwindcss";
@import "@bitrix24/b24ui-nuxt";

Learn more in the installation guide.

Contribution

Thank you for considering contributing to Bitrix24 UI. Here are a few ways you can get involved:

• Reporting bugs: open a bug report. The form asks for a reproduction, and that is the field that decides whether the report can be acted on — see reporting a bug.
• Suggestions: open a feature request. Have any thoughts to enhance Bitrix24 UI? We'd love to hear them.
• Code: CONTRIBUTING.md is the map — setup, the deep-dive guides, and what CI expects of a pull request. The contribution guide on the documentation site covers getting the repository running.

Tip

We provide contributing guidelines through AGENTS.md for AI assistants to help you contribute to Bitrix24 UI. It is automatically picked up by all AI coding agents and guides through component structure, theming patterns, testing conventions, and documentation guidelines.

Credits

• nuxt/nuxt
• nuxt/ui
• unovue/reka-ui
• tailwindlabs/tailwindcss
• vueuse/vueuse