# B24 UI Nuxt

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

- Skill: `bitrix24/b24-ui-nuxt` (Agent Skill, multi-file: 16 files)
- Install (CLI): `npx skillmds@latest add bitrix24/b24-ui-nuxt`
- Raw SKILL.md: https://api.skillmd.com/api/skills/bitrix24/b24-ui-nuxt/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: bitrix24 (https://skillmd.com/u/bitrix24)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/bitrix24/b24-ui-nuxt

---


# Bitrix24 UI

Vue component library built on [Reka UI](https://reka-ui.com/) + [Tailwind CSS](https://tailwindcss.com/) + [Tailwind Variants](https://www.tailwind-variants.org/). Works with Nuxt, Vue (Vite), Laravel (Vite + Inertia), and AdonisJS (Vite + Inertia).

## LLMs.txt

When you need to know **what a component accepts** or **how its API works** — props, slots, events, full documentation, examples — use the [Bitrix24 UI documentation](https://bitrix24.github.io/b24ui/llms.txt); if it is not already configured, add it. 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/b24ui/<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. **Find icons through the [icons guideline](references/guidelines/icons.md)** — it maps a plain-language request to the right import.

## 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](references/guidelines/design-system.md) — semantic colors, theming, brand customization, variants, the `b24ui` prop
- [component-selection](references/guidelines/component-selection.md) — decision matrices: when to use Modal vs Slideover, Select vs SelectMenu, Toast vs Alert, etc.
- [conventions](references/guidelines/conventions.md) — coding patterns, slot naming, items arrays, composables, keyboard shortcuts
- [forms](references/guidelines/forms.md) — form validation, field layout, error handling, Standard Schema
- [icons](references/guidelines/icons.md) — import icon and use it

**Layouts** — full page structure patterns:
- [landing](references/layouts/landing.md) — landing pages
- [dashboard](references/layouts/dashboard.md) — admin UI with sidebar and panels

**Recipes** — complete patterns for common tasks:
- [data-tables](references/recipes/data-tables.md) — tables with filters, pagination, sorting, selection
- [overlays](references/recipes/overlays.md) — modals, slideovers, drawers, command palette, info popovers
- [navigation](references/recipes/navigation.md) — headers, sidebars, breadcrumbs, tabs
- [card-pickers](references/recipes/card-pickers.md) — icon-and-description card grids for picking a setting variant or toggling capabilities (`B24PageCardGroup`)
- [settings](references/recipes/settings.md) — 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
- [detail-panel](references/recipes/detail-panel.md) — entity info sidebars: metadata, togglable settings and grouped content sections beside a main view
- [task-form](references/recipes/task-form.md) — a single-column task/issue form combining `B24Editor`, assignee fields, a date picker and a wrap row of secondary actions

**Quick reference:**
- [components](references/components.md) — 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, component-selection |
| Display data in a table | conventions, component-selection, data-tables |
| Add a chat interface | conventions, components (§ Chat) |
| Add a modal, slideover, or drawer | conventions, component-selection, overlays |
| Build site navigation | conventions, component-selection, navigation |
| Render markdown | component-selection, components (§ Prose and § Content) |
| 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, components (§ Editor) |
| Build a task / issue form with a rich-text description, assignees and a due date | conventions, forms, task-form |
| Build an entity info sidebar — channel info, CRM record detail, "about this item" | conventions, component-selection, detail-panel |
| Find an icon for a button, item or empty state | icons |
| General UI work | conventions, component-selection |

## Installation

### Nuxt

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

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

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

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

### Vue (Vite)

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

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

```ts
// 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')
```

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

```vue
<!-- 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`.