b24-ui-nuxt

name	b24-ui-nuxt
description	Build UIs with @bitrix24/b24ui-nuxt v2 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, building forms, or composing layouts for Bitrix24 application.

Bitrix24 UI

Vue component library built on Reka UI + Tailwind CSS + Tailwind Variants. Works with Nuxt, Vue (Vite), Laravel (Vite + Inertia), and AdonisJS (Vite + Inertia).

LLMs.txt

For component API details (props, slots, events, full documentation, examples), use the Bitrix24 UI documentation. If not already configured, add it.

When you need to know what a component accepts or how its API works, use the Bitrix24 UI documentation. This skill teaches you when to use which component and how to build well.

Core rules (always apply)

1. Always wrap the app in B24App — required for toasts, tooltips, and programmatic overlays. Accepts a locale prop for i18n.
2. Always use semantic colors — text-description, bg-elevated, border-muted, etc. Never use raw Tailwind palette colors like text-gray-500.
3. Read generated theme files for slot names — Nuxt: .nuxt/ui/<component>.ts, Vue: node_modules/.b24ui-nuxt/b24ui/<component>.ts. These show every slot, variant, and default class for any component.
4. Override priority (highest wins): b24ui prop / class prop → global config → theme defaults.
5. See icons guideline for find icons.

How to use this skill

Based on the task, load the relevant reference files before writing any code. Don't load everything — only what's needed.

Reference files

Guidelines — design decisions and conventions:

• design-system — semantic colors, theming, brand customization, variants, the b24ui prop
• component-selection — decision matrices: when to use Modal vs Slideover, Select vs SelectMenu, Toast vs Alert, etc.
• conventions — coding patterns, slot naming, items arrays, composables, keyboard shortcuts
• forms — form validation, field layout, error handling, Standard Schema
• icons — import icon and use it

Layouts — full page structure patterns:

• landing — landing pages
• dashboard — admin UI with sidebar and panels

Recipes — complete patterns for common tasks:

• data-tables — tables with filters, pagination, sorting, selection
• overlays — modals, slideovers, drawers, command palette, info popovers
• navigation — headers, sidebars, breadcrumbs, tabs
• card-pickers — icon-and-description card grids for picking a setting variant or toggling capabilities (B24PageCardGroup)
• settings — settings layouts: when to use Switch vs Radio vs Checkbox vs PageCardGroup, plus the rich card variant recipe with preview image, description and "Learn more" link

Quick reference:

• components — categorized component index for finding the right component name

Routing table

Task	Load these references
Build application for Bitrix24 / a dashboard / admin UI	conventions, component-selection, dashboard
Build a landing page	design-system, conventions, landing
Add a settings page	conventions, forms, settings
Pick one option / toggle several where each option deserves a preview image, multi-line description and an inline "Learn more" link — layout chooser, plan picker with screenshots	conventions, settings
Create a login / signup form	conventions, forms, auth
Display data in a table	conventions, component-selection, data-tables
Add a chat interface	conventions, chat
Add a modal, slideover, or drawer	conventions, component-selection, overlays
Build site navigation	conventions, component-selection, navigation
Render markdown	component-selection, components, docs
Pick one option (or toggle several) from a small set where each option needs an icon and a sentence — settings variants, capability flags, "what do you want to build?" wizard step	conventions, component-selection, card-pickers
Add a rich text editor	conventions, editor
General UI work	conventions, component-selection

Installation

Nuxt

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

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

/* app/assets/css/main.css */
@import "tailwindcss";
@import "@bitrix24/b24ui-nuxt";

<!-- app.vue -->
<template>
  <B24App>
    <NuxtPage />
  </B24App>
</template>

Vue (Vite)

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

// 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()
  ]
})

// src/main.ts
import './assets/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')

/* src/assets/css/main.css */
@import "tailwindcss";
@import "@bitrix24/b24ui-nuxt";

<!-- src/App.vue -->
<template>
  <B24App>
    <RouterView />
  </B24App>
</template>

Add class="isolate" to your root <div id="app"> in index.html. For Inertia: use b24ui({ router: 'inertia' }) in vite.config.ts.