### Start Development Servers

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/1.getting-started/4.contribution.md

Commands to start development servers for the documentation, Nuxt components, or Vue components.

```bash
pnpm run docs
```

```bash
pnpm run dev
```

```bash
pnpm run dev:vue
```

--------------------------------

### Example Script Execution

Source: https://github.com/bitrix24/b24ui/blob/main/scripts/b24-self-task/README.md

An example of activating the virtual environment and running the script with a specific task ID.

```bash
source venv/bin/activate
python scripts/b24-self-task/make.py 2026
```

--------------------------------

### ChatPrompt as a starting point for a chat interface

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/chat-prompt.md

This example shows how to use the ChatPrompt component as the input mechanism for a full chat interface, integrating with a chat service and navigation.

```APIDOC
## ChatPrompt as a starting point

### Description
This example demonstrates using the `B24ChatPrompt` component to build a chat interface. It includes setting up a chat service, handling user input, and navigating to a chat page upon the first message.

### Code Example

```vue [pages/index.vue] {2,4,8-15,23,25}
<script setup lang="ts">
import { Chat } from '@ai-sdk/vue'

const input = ref('')

const chat = new Chat()

async function onSubmit() {
  chat.sendMessage({ text: input.value })

  // Navigate to chat page after first message
  if (chat.messages.length === 1) {
    await navigateTo('/chat')
  }
}
</script>

<template>
  <B24DashboardPanel>
    <template #body>
      <B24Container>
        <h1>How can I help you today?</h1>
  
        <B24ChatPrompt v-model="input" @submit="onSubmit">
          <B24ChatPromptSubmit :status="chat.status" />
        </B24ChatPrompt>
      </B24Container>
    </template>
  </B24DashboardPanel>
</template>
```
```

--------------------------------

### Clone Nuxt Starter Template

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/1.getting-started/2.installation/1.nuxt.md

Clone the minimal starter template to quickly get started with Nuxt UI and Bitrix24 UI.

```bash
git clone https://github.com/bitrix24/starter-b24ui.git <project-name>
cd <project-name>
pnpm install
pnpm run dev
```

--------------------------------

### Stepper Example - With Controls

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/stepper.md

An example demonstrating how to integrate additional controls (like buttons) with the Stepper.

```APIDOC
## Examples

### With controls

You can add additional controls for the stepper using buttons.

:component-example{name="stepper-with-controls-example"}
```

--------------------------------

### Using the Steps Component

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/4.typography/steps.md

Wrap headings with the `Steps` component and specify the `level` prop to define the heading level that starts the steps. This example shows how to integrate the Bitrix24 UI module, import Tailwind CSS, and start the development server.

```vue
::steps{level="4"}

#### Add the Bitrix24 UI module in your `nuxt.config.ts`

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

#### Import Tailwind CSS in your CSS

```css [app/assets/css/main.css]
@import "tailwindcss";
```

#### Start your development server

```bash
npm run dev
```

::
```

```mdc
::steps{level="4"}

#### Add the Bitrix24 UI module in your `nuxt.config.ts`

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

#### Import Tailwind CSS in your CSS

```css [app/assets/css/main.css]
@import "tailwindcss";
```

#### Start your development server

```bash
npm run dev
```

::
```

--------------------------------

### Install b24pysdk

Source: https://github.com/bitrix24/b24ui/blob/main/scripts/b24-self-task/README.md

Installs the Bitrix24 Python SDK if it's not already installed. This is a troubleshooting step.

```bash
pip install b24pysdk
```

--------------------------------

### Demo Playground

Source: https://github.com/bitrix24/b24ui/blob/main/AGENTS.md

Starts the demo playground environment.

```bash
pnpm run demo:dev
```

--------------------------------

### Install Dependencies

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/1.getting-started/4.contribution.md

Install project dependencies using pnpm, the recommended package manager.

```bash
pnpm install
```

--------------------------------

### Install Bitrix24 UI Skill Globally

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/1.getting-started/7.ai/3.skills.md

Install the Bitrix24 UI skill globally using the skills CLI so it is available across all your projects.

```bash
npx skills add bitrix24/b24ui --global
```

--------------------------------

### Install Dependencies for BxAssistant

Source: https://github.com/bitrix24/b24ui/blob/main/docs/modules/bx-assistant/README.md

Install the necessary dependencies for the BxAssistant module using pnpm.

```bash
pnpm add @ai-sdk/mcp @ai-sdk/vue @ai-sdk/deepseek ai motion-v shiki shiki-stream @shikijs/core @shikijs/engine-javascript @shikijs/langs @shikijs/themes
```

--------------------------------

### ChatPrompt as a Starting Point for Chat Interface

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/chat-prompt.md

This example shows how to integrate the ChatPrompt component into a Vue application to serve as the entry point for a chat interface. It includes logic for sending the initial message and navigating to the chat page.

```vue
<script setup lang="ts">
import { Chat } from '@ai-sdk/vue'

const input = ref('')

const chat = new Chat()

async function onSubmit() {
  chat.sendMessage({ text: input.value })

  // Navigate to chat page after first message
  if (chat.messages.length === 1) {
    await navigateTo('/chat')
  }
}
</script>

<template>
  <B24DashboardPanel>
    <template #body>
      <B24Container>
        <h1>How can I help you today?</h1>
  
        <B24ChatPrompt v-model="input" @submit="onSubmit">
          <B24ChatPromptSubmit :status="chat.status" />
        </B24ChatPrompt>
      </B24Container>
    </template>
  </B24DashboardPanel>
</template>
```

--------------------------------

### Usage Example

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/app.md

Demonstrates how to use the B24App component at the root of your application.

```APIDOC
## Usage

This component implements Reka UI [ConfigProvider](https://reka-ui.com/docs/utilities/config-provider) to provide global configuration to all components:

- Enables all primitives to inherit global reading direction.
- Enables changing the behavior of scroll body when setting body lock.
- Much more controls to prevent layout shifts.

It's also using [ToastProvider](https://reka-ui.com/docs/components/toast#provider) and [TooltipProvider](https://reka-ui.com/docs/components/tooltip#provider) to provide global toasts and tooltips.

Use it as at the root of your app:

```vue [app.vue]
<template>
  <B24App>
    <NuxtPage />
  </B24App>
</template>
```

::framework-only
#nuxt
:::tip{to="/docs/getting-started/integrations/i18n/nuxt/#locale"}
Learn how to use the `locale` prop to change the locale of your app. This also controls the date/time format in components like Calendar, InputDate, and InputTime.
:::

#vue
:::tip{to="/docs/getting-started/integrations/i18n/vue/#locale"}
Learn how to use the `locale` prop to change the locale of your app. This also controls the date/time format in components like Calendar, InputDate, and InputTime.
:::
::

## API

### Props

:component-props

### Slots

:component-slots
```

--------------------------------

### Tooltip with Help Icon

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/tooltip.md

Example demonstrating the use of the Icon component with the Tooltip.

```APIDOC
### Help Icon

You can use the [Icon](https://bitrix24.github.io/b24icons/icons/) and the Tooltip.

::component-example
---
name: 'tooltip-help-icon-example'
---
::
```

--------------------------------

### Install b24ui-nuxt with Different Package Managers

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/4.typography/code-group.md

Demonstrates how to install the b24ui-nuxt package using pnpm, yarn, npm, and bun. This is useful for users who prefer different package managers.

```bash
pnpm add @bitrix24/b24ui-nuxt
```

```bash
yarn add @bitrix24/b24ui-nuxt
```

```bash
npm install @bitrix24/b24ui-nuxt
```

```bash
bun add @bitrix24/b24ui-nuxt
```

--------------------------------

### Install MCP Package

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/chat.md

Install the MCP package using npm, pnpm, or yarn.

```bash
npm install @ai-sdk/mcp
```

```bash
pnpm add @ai-sdk/mcp
```

```bash
yarn add @ai-sdk/mcp
```

--------------------------------

### Responsive Drawer Example

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/drawer.md

Render a Modal on desktop and a Drawer on mobile by utilizing responsive design principles.

```vue
::component-example
--- 
prettier: true
name: 'drawer-responsive-example'
---
::
```

--------------------------------

### Install Bitrix24 UI Skill in Cursor

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/1.getting-started/7.ai/3.skills.md

Install the Bitrix24 UI skill directly in Cursor by clicking the provided button, which uses a custom URL scheme.

```html
<a href="cursor://anysphere.cursor-deeplink/install-skill?url=https://github.com/bitrix24/b24ui/tree/main/skills/b24-ui-nuxt">Install Skill</a>
```

--------------------------------

### Basic Theme Setup with Tailwind CSS

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/1.getting-started/5.theme/1.design-system.md

Import Tailwind CSS and the Bitrix24 UI theme, then define custom design tokens within the `@theme` directive. This is the starting point for customizing your application's theme.

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

@theme {
  /* Your custom design tokens go here */
}
```

--------------------------------

### Vue Playground

Source: https://github.com/bitrix24/b24ui/blob/main/AGENTS.md

Starts the Vue development server for the playground environment.

```bash
pnpm run dev:vue
```

--------------------------------

### Nuxt Playground

Source: https://github.com/bitrix24/b24ui/blob/main/AGENTS.md

Starts the Nuxt development server for the playground environment.

```bash
pnpm run dev
```

--------------------------------

### Link CLI

Source: https://github.com/bitrix24/b24ui/blob/main/AGENTS.md

Links the local CLI for scaffolding new components. This is a one-time setup step.

```bash
npm link
```

--------------------------------

### Install DeepSeek Provider Dependencies

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/chat.md

Install the necessary dependencies for the DeepSeek provider using pnpm, yarn, npm, or bun.

```bash
pnpm add ai @ai-sdk/deepseek @ai-sdk/vue
```

```bash
yarn add ai @ai-sdk/deepseek @ai-sdk/vue
```

```bash
npm install ai @ai-sdk/deepseek @ai-sdk/vue
```

```bash
bun add ai @ai-sdk/deepseek @ai-sdk/vue
```

--------------------------------

### Stepper Example - With Content Slot

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/stepper.md

Demonstrates using the `#content` slot to provide custom content for each step in the Stepper.

```APIDOC
### With content slot

Use the `#content` slot to customize the content of each item.

:component-example{name="stepper-content-slot-example"}
```

--------------------------------

### Entity Info Popover Example

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/popover.md

This example demonstrates how to build a compact entity-info popover using various B24 UI components. It's designed to sit on top of an entity name in running text, providing a summary of the underlying record.

```html
<template>
  <B24Popover>
    <template #trigger>
      <B24Link>Account Name</B24Link>
    </template>
    <template #content>
      <div class="p-6">
        <div class="flex items-center gap-4.5">
          <B24Avatar accent="copilot" size="lg" />
          <div>
            <div class="text-label">Account Title</div>
            <div class="text-description">A short status line</div>
          </div>
        </div>
        <B24Separator class="my-4.5" />
        <B24Button size="sm" variant="primary">Primary CTA</B24Button>
        <B24Separator class="my-4.5" />
        <B24DescriptionList>
          <B24DescriptionListItem label="Owner">
            <template #value>
              <B24Link>User Name</B24Link>
            </template>
          </B24DescriptionListItem>
          <B24DescriptionListItem label="Created At">
            <template #value>
              <time datetime="2023-10-26T10:00:00Z">Oct 26, 2023</time>
            </template>
          </B24DescriptionListItem>
        </B24DescriptionList>
      </div>
    </template>
  </B24Popover>
</template>

<script setup>
import {
  B24Popover,
  B24Link,
  B24Avatar,
  B24Separator,
  B24Button,
  B24DescriptionList,
  B24DescriptionListItem,
} from "@/components/index.js";
</script>

<style scoped>
.w-full {
  width: 100%;
}
.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}
.p-6 {
  padding: 1.5rem;
}
.flex {
  display: flex;
}
.items-center {
  align-items: center;
}
.gap-4.5 {
  gap: 1.125rem;
}
.text-label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}
.text-description {
  font-size: 0.75rem;
  line-height: 1rem;
  color: #6b7280;
}
.my-4.5 {
  margin-top: 1.125rem;
  margin-bottom: 1.125rem;
}
.w-65 {
  width: 16.25rem;
}
.size-sm {
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
}
.variant-primary {
  background-color: #007bff;
  color: white;
}
</style>

```

--------------------------------

### Install @nuxt/content with bun

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/1.getting-started/6.integrations/5.content.md

Use this command to add the @nuxt/content module to your project using bun.

```bash
bun add @nuxt/content
```

--------------------------------

### Drag Handle with Suggestion Menu

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/editor-drag-handle.md

This example shows how to integrate a `Button` with the `EditorDragHandle` to open an `EditorSuggestionMenu`. It utilizes the `onClick` slot function to get the current node position and insert new blocks using `handlers.suggestion?.execute(editor, { pos: node?.pos }).run()`.

```APIDOC
## With suggestion menu

Use the default slot to add a [Button](/docs/components/button/) next to the drag handle to open the [EditorSuggestionMenu](/docs/components/editor-suggestion-menu/).

Call the `onClick` slot function to get the current node position, then use `handlers.suggestion?.execute(editor, { pos: node?.pos }).run()`{lang="ts-type"} to insert new blocks at that position.

::component-example
---
elevated: true
collapse: true
name: 'editor-drag-handle-suggestion-menu-example'
class: '!p-0'
---
::
```

--------------------------------

### Install Bitrix24 UI Packages

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/1.getting-started/2.installation/1.nuxt.md

Install the necessary Bitrix24 UI packages and Tailwind CSS for your Nuxt project using your preferred package manager.

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

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

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

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

--------------------------------

### PageHeader within a Page Example

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/page-header.md

An example demonstrating how to integrate the PageHeader component into a page, dynamically populating its props from page data.

```APIDOC
## Examples

::note
While these examples use [Nuxt Content](https://content.nuxt.com), the components can be integrated with any content management system.
::

### Within a page

Use the PageHeader component in a page to display the header of the page:

```vue
<script setup lang="ts">
const route = useRoute()

definePageMeta({
  layout: 'docs'
})

const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('docs').path(route.path).first()
})

const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
  return queryCollectionItemSurroundings('content', route.path)
})
</script>

<template>
  <B24Page>
    <B24PageHeader
      :title="page.title"
      :description="page.description"
      :headline="page.headline"
      :links="page.links"
    />

    <B24PageBody>
      <ContentRenderer :value="page" />

      <B24Separator />

      <B24ContentSurround :surround="surround" />
    </B24PageBody>

    <template #right>
      <B24ContentToc :links="page.body.toc.links" />
    </template>
  </B24Page>
</template>
```
```

--------------------------------

### Sales Dynamics Widget Example

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/card.md

A real-world example demonstrating a CRM dashboard widget using the `Card` component with the `filled-copilot` variant. It includes buttons, tooltips, and CSS grid for metrics.

```vue
<template>
  <B24Card
    class="w-full my-0"
    variant="filled-copilot"
  >
    <template #header>
      <div class="flex items-center justify-between">
        <div>
          <div class="text-lg font-semibold">Repeat sales dynamics</div>
          <div class="text-sm text-white/70">
            Total deals and value analyzed over time
          </div>
        </div>
        <B24Button
          rounded
          color="air-tertiary-no-accent"
          :trailing-icon="RepeatIcon"
        >
          Date range
        </B24Button>
      </div>
    </template>

    <div
      class="grid grid-cols-[1fr_auto_auto] gap-x-4 gap-y-2"
    >
      <div class="text-sm text-white/50">Count</div>
      <div class="text-sm text-white/50 text-right">Amount</div>
      <div class="text-sm text-white/50 text-right">% Change</div>

      <template v-for="(row, i) in rows" :key="i">
        <div class="font-semibold">{{ row.label }}</div>
        <div class="text-right">{{ row.count }}</div>
        <div class="text-right">{{ row.amount }}</div>
      </template>

      <template v-if="highlight">
        <div
          class="col-span-3 p-2 rounded-xl bg-white/15 ring-1 ring-white/20 grid grid-cols-[1fr_auto_auto] gap-x-4"
        >
          <div class="flex items-center gap-1 font-semibold">
            {{ highlight.label }}
            <B24Tooltip :text="highlight.info">
              <template #activator>
                <Info1Icon class="w-4 h-4 text-white/50" />
              </template>
            </B24Tooltip>
          </div>
          <div class="text-right">{{ highlight.count }}</div>
          <div class="text-right">{{ highlight.amount }}</div>
        </div>
      </template>
    </div>

    <template #footer>
      <div class="flex items-center justify-between">
        <B24Button color="air-tertiary-no-accent" :leading-icon="SettingsIcon">
          Configure
        </B24Button>
        <B24Button color="air-tertiary-no-accent" :leading-icon="FeedbackIcon">
          Feedback
        </B24Button>
      </div>
    </template>
  </B24Card>
</template>

<script setup lang="ts">
import B24Card from "@/runtime/components/Card.vue";
import B24Button from "@/runtime/components/Button.vue";
import B24Tooltip from "@/runtime/components/Tooltip.vue";
import RepeatIcon from "@/runtime/icons/RepeatIcon.vue";
import Info1Icon from "@/runtime/icons/Info1Icon.vue";
import SettingsIcon from "@/runtime/icons/SettingsIcon.vue";
import FeedbackIcon from "@/runtime/icons/FeedbackIcon.vue";

const rows = [
  { label: "New deals", count: "35", amount: "$1.2M" },
  { label: "Won deals", count: "12", amount: "$450K" },
  { label: "Lost deals", count: "8", amount: "$200K" },
];

const highlight = {
  label: "Conversion rate",
  count: "34.3%",
  amount: "$1.85M",
  info: "Calculated as won deals value / (won + lost deals value)",
};
</script>
```

--------------------------------

### Install Nuxt I18n Package

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/1.getting-started/6.integrations/4.i18n/1.nuxt.md

Install the `@nuxtjs/i18n` package using your preferred package manager to enable dynamic language switching.

```bash
pnpm add @nuxtjs/i18n
```

```bash
yarn add @nuxtjs/i18n
```

```bash
npm install @nuxtjs/i18n
```

```bash
bun add @nuxtjs/i18n
```

--------------------------------

### Color Picker Chooser Example

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/color-picker.md

An example demonstrating how to integrate the ColorPicker with Button and Popover components to create a custom color chooser UI.

```vue
<script setup lang="ts">
import { ref } from 'vue'

const color = ref('#00C16A')
const showPopover = ref(false)
</script>

<template>
  <Popover v-model="showPopover" :width="280" :offset="[0, 8]">
    <template #trigger>
      <Button @click="showPopover = !showPopover" :style="{ backgroundColor: color }" variant="ghost" size="sm" :icon-left="{
        name: 'circle',
        color: 'white',
        width: 14,
        height: 14
      }" />
    </template>
    <ColorPicker v-model="color" @update:modelValue="showPopover = false" />
  </Popover>
</template>
```

--------------------------------

### Install Vue I18n Package

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/1.getting-started/6.integrations/4.i18n/2.vue.md

Install the `vue-i18n` package to enable dynamic language switching. This is a prerequisite for using the Vue I18n plugin.

```bash
pnpm add vue-i18n@11
```

```bash
yarn add vue-i18n@11
```

```bash
npm install vue-i18n@11
```

```bash
bun add vue-i18n@11
```

--------------------------------

### Stepper with Controls Example

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/stepper.md

Demonstrates adding additional controls for the stepper using buttons.

```vue
<template>
  <StepperWithControlsExample />
</template>
```

--------------------------------

### Install Chat Dependencies

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/chat.md

Install the necessary packages for using the Chat components with the Vercel AI SDK. This includes the core AI SDK, gateway, and Vue integration.

```bash
pnpm add ai @ai-sdk/gateway @ai-sdk/vue
```

```bash
yarn add ai @ai-sdk/gateway @ai-sdk/vue
```

```bash
npm install ai @ai-sdk/gateway @ai-sdk/vue
```

```bash
bun add ai @ai-sdk/gateway @ai-sdk/vue
```

--------------------------------

### Usage Example

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/3.composables/define-locale.md

Demonstrates how to use the defineLocale composable to set up a custom locale, including translation messages.

```APIDOC
## Example Usage

```vue
<script setup lang="ts">
import type { Messages } from '@bitrix24/b24ui-nuxt'

const locale = defineLocale<Messages>({
  name: 'Español',
  code: 'la',
  locale: 'es',
  dir: 'ltr',
  messages: {
    alert: {
      close: 'Cerrar'
    },
    modal: {
      close: 'Cerrar'
    },
    commandPalette: {
      back: 'Atrás',
      close: 'Cerrar',
      noData: 'Sin datos',
      noMatch: 'Sin resultados',
      placeholder: 'Escribe un comando o busca…'
    }
    // ... other component messages
  }
})
</script>

<template>
  <B24App :locale="locale">
    <NuxtPage />
  </B24App>
</template>
```
```

--------------------------------

### Custom Editor Handlers Example

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/editor.md

Demonstrates how to create and use custom handlers for the B24Editor. This example adds a 'highlight' handler and includes it in the toolbar items.

```vue
<script setup lang="ts">
import type { Editor } from '@tiptap/vue-3'
import type { EditorCustomHandlers, EditorToolbarItem } from '@bitrix24/b24ui-nuxt'
import BoldIcon from '@bitrix24/b24icons-vue/outline/BoldIcon'
import TextColorIcon from '@bitrix24/b24icons-vue/editor/TextColorIcon'

const value = ref('<h1>Hello World</h1>\n')

const customHandlers = {
  highlight: {
    canExecute: (editor: Editor) => editor.can().toggleHighlight(),
    execute: (editor: Editor) => editor.chain().focus().toggleHighlight(),
    isActive: (editor: Editor) => editor.isActive('highlight'),
    isDisabled: (editor: Editor) => !editor.isEditable
  }
} satisfies EditorCustomHandlers

const items = [
  // Built-in handler
  { kind: 'mark', mark: 'bold', icon: BoldIcon },
  // Custom handler
  { kind: 'highlight', icon: TextColorIcon }
] satisfies EditorToolbarItem<typeof customHandlers>[]
</script>

<template>
  <B24Editor v-slot="{ editor }" v-model="value" :handlers="customHandlers">
    <B24EditorToolbar :editor="editor" :items="items" />
  </B24Editor>
</template>
```

--------------------------------

### Resizable Panel Example

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/dashboard-panel.md

Demonstrates how to make a DashboardPanel resizable using the `resizable` prop.

```APIDOC
### Resizable

Use the `resizable` prop to make the panel resizable.

::component-code
---
prettier: true
hide:
  - class
props:
  resizable: true
  minSize: 200
  defaultSize: 240
  maxSize: 250
  class: '!min-h-96'
slots:
  body: |

    <Placeholder class="ms-2 mt-4 h-96" />
class: '!p-0 !justify-start'
---

#body
:placeholder{class="ms-2 mt-4 h-96"}
::
```

--------------------------------

### Basic Image Usage

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/4.typography/4.images-and-embeds.md

Use markdown syntax for images. If `@nuxt/image` is installed, `<NuxtImg>` will be used for optimization.

```markdown
![Image](/b24ui/assets/demo/b24rich_new.png)
```

--------------------------------

### Install @nuxt/content with npm

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/1.getting-started/6.integrations/5.content.md

Use this command to add the @nuxt/content module to your project using npm.

```bash
npm install @nuxt/content
```

--------------------------------

### Nested Modals Example

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/modal.md

Demonstrates how to nest Modal components within each other.

```vue
<template>
  <B24Button label="Open" />

  <B24Modal title="Outer Modal">
    <div class="p-4">
      <p>This is the outer modal.</p>
      <B24Button label="Open Inner Modal" />

      <B24Modal title="Inner Modal">
        <div class="p-4">
          This is the inner modal.
        </div>
      </B24Modal>
    </div>
  </B24Modal>
</template>

<script setup lang="ts">
import B24Button from "#components/button/B24Button.vue";
import B24Modal from "#components/modal/B24Modal.vue";
</script>
```

--------------------------------

### Install @nuxt/content with yarn

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/1.getting-started/6.integrations/5.content.md

Use this command to add the @nuxt/content module to your project using yarn.

```bash
yarn add @nuxt/content
```

--------------------------------

### Install @nuxt/content with pnpm

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/1.getting-started/6.integrations/5.content.md

Use this command to add the @nuxt/content module to your project using pnpm.

```bash
pnpm add @nuxt/content
```

--------------------------------

### Callout as a Link

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/4.typography/callout.md

Make the callout a link by passing properties from the `<NuxtLink>` component, such as `to` and `target`. The example links to the installation guide.

```APIDOC
### Link

You can pass any property from the [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link) component such as `to` and `target` to make the callout a link.

::component-code{slug="callout" prose}
---
hide:
  - class
ignore:
  - icon
  - color
  - target
cast:
  icon: 'RocketIcon'
props:
  icon: 'RocketIcon'
  to: '/docs/getting-started/installation/nuxt/'
  color: air-primary
  class: 'w-full my-0'
slots:
  default: Learn how to install `@bitrix24/b24ui-nux` in your project.
---
::
```

--------------------------------

### Stepper Example - Control Active Item

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/stepper.md

Shows how to manage the active step in the Stepper using `default-value` or `v-model`.

```APIDOC
### Control active item

You can control the active item by using the `default-value` prop or the `v-model` directive with the `value` of the item. If no `value` is provided, it defaults to the index.

:component-example{name="stepper-model-value-example"}

::tip
Use the `value-key` prop to change the key used to match items when a `v-model` or `default-value` is provided.
::
```

--------------------------------

### Simple List of Elements

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/slideover.md

Example showcasing a slideover containing a simple list of elements.

```APIDOC
## Simple List of Elements

### Description
Demonstrates a basic slideover implementation displaying a list.

### Example
```html
<B24Slideover title="Simple List">
  <template #trigger>
    <B24Button label="Show List" />
  </template>
  <template #body>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </template>
</B24Slideover>
```
```

--------------------------------

### Editor Suggestion Menu Example

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/editor.md

Shows how to integrate the EditorSuggestionMenu for slash commands, enabling quick formatting and insertions.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import type { Editor } from '@tiptap/vue-3'
import type { Suggestion } from '@tiptap/suggestion'

const value = ref('<h1>Hello World</h1>\n')

const suggestionMenu = {
  items: ({ query }: { query: string }) => {
    return [
      { title: 'Bold', command: 'bold' },
      { title: 'Italic', command: 'italic' },
      { title: 'Underline', command: 'underline' },
      { title: 'Strike', command: 'strike' },
      { title: 'Bullet list', command: 'bullet_list' },
      { title: 'Ordered list', command: 'ordered_list' },
      { title: 'Quote', command: 'blockquote' },
      { title: 'Code block', command: 'code_block' }
    ].filter(({ title }) =>
      title.toLowerCase().startsWith(query.toLowerCase())
    )
  },
  render: () => {
    let component: any
    letмець: HTMLElement

    return {
      onStart: (props) => {
        мец = document.createElement('div')
        component = createApp(SuggestionMenu, props).mount(мец)
      },
      onUpdate: (props) => {
        component.$props = props
      },
      onKeyDown(props) {
        if (props.event.key === 'Escape') {
          component.value = null
          return true
        }

        if (props.event.key === 'Enter') {
          component.selectItem(props.activeItemIndex)
          return true
        }

        if (props.event.key === 'ArrowUp') {
          component.activeItemIndex = props.activeItemIndex - 1
          return true
        }

        if (props.event.key === 'ArrowDown') {
          component.activeItemIndex = props.activeItemIndex + 1
          return true
        }

        return false
      },
      onExit: () => {
        component.$destroy()
        мец.remove()
      },
      onCreateNode: (props) => {
        return props.editor.commands[props.item.command]()
      },
      onPm: (props) => {
        return props.editor.commands[props.item.command]()
      }
    }
  }
} satisfies Suggestion
</script>

<template>
  <B24Editor v-model="value" v-slot="{ editor }">
    <EditorSuggestionMenu :editor="editor" :suggestion="suggestionMenu" />
    <B24EditorToolbar :editor="editor" />
  </B24Editor>
</template>
```

--------------------------------

### Form with Regle Schema Validation

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/form.md

This example demonstrates using the Form component with Regle for schema validation. Ensure Regle is installed.

```vue
<script setup lang="ts">
import { reactive } from 'vue'
import { createSchema, string, minLength } from 'regle'

const state = reactive({
    name: '',
    email: ''
})

const schema = createSchema({
    name: string([minLength(1, 'Name must be at least 1 character long')]),
    email: string([minLength(1, 'Email must be at least 1 character long')])
})
</script>

<template>
    <Form :schema="schema" v-model:state="state">
        <FormField name="name" label="Name">
            <template #input="{ error, id, ...attrs }">
                <UInput :id="id" v-bind="attrs" />
                <FormError :error="error" />
            </template>
        </FormField>

        <FormField name="email" label="Email">
            <template #input="{ error, id, ...attrs }">
                <UInput :id="id" v-bind="attrs" />
                <FormError :error="error" />
            </template>
        </FormField>
    </Form>
</template>
```

--------------------------------

### Responsive drawer

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/drawer.md

You can render a [Modal](/docs/components/modal/) component on desktop and a Drawer on mobile for example.

```APIDOC
## Responsive drawer

You can render a [Modal](/docs/components/modal/) component on desktop and a Drawer on mobile for example.

::component-example
---
prettier: true
name: 'drawer-responsive-example'
---
::
```

--------------------------------

### Basic usage example

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/3.composables/define-shortcuts.md

Demonstrates how to define simple keyboard shortcuts for common actions like opening a help modal, a command palette, or navigating to a dashboard.

```APIDOC
## Basic usage

```vue
<script setup lang="ts">
defineShortcuts({
  '?': () => openHelpModal(),
  'meta_k': () => openCommandPalette(),
  'g-d': () => navigateToDashboard()
})
</script>
```
```

--------------------------------

### Form with Joi Schema Validation

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/form.md

This example shows how to use Joi for schema validation within the Form component. Joi must be installed.

```vue
<script setup lang="ts">
import { reactive } from 'vue'
import * as Joi from 'joi'

const state = reactive({
    name: '',
    email: ''
})

const schema = Joi.object({
    name: Joi.string().min(1).messages({
        'string.min': 'Name must be at least 1 character long'
    }),
    email: Joi.string().min(1).messages({
        'string.min': 'Email must be at least 1 character long'
    })
})
</script>

<template>
    <Form :schema="schema" v-model:state="state">
        <FormField name="name" label="Name">
            <template #input="{ error, id, ...attrs }">
                <UInput :id="id" v-bind="attrs" />
                <FormError :error="error" />
            </template>
        </FormField>

        <FormField name="email" label="Email">
            <template #input="{ error, id, ...attrs }">
                <UInput :id="id" v-bind="attrs" />
                <FormError :error="error" />
            </template>
        </FormField>
    </Form>
</template>
```

--------------------------------

### Documentation Site

Source: https://github.com/bitrix24/b24ui/blob/main/AGENTS.md

Builds and serves the documentation website.

```bash
pnpm run docs
```

--------------------------------

### Dropdown Menu with Arrow

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/dropdown-menu.md

Use the `arrow` prop to display an arrow on the DropdownMenu. This example shows a basic setup with items and a button to open the menu.

```vue
<template>
  <B24Button label="Open" />
</template>

<script setup lang="ts">
import { B24Button } from "@/components/button";

const items = [
  { label: "Profile" },
  { label: "Billing" },
  { label: "Settings" },
];
</script>

<style scoped>
.w-48 {
  width: 12rem;
}
</style>

<DropdownMenu
  :arrow="true"
  :items="items"
  :b24ui="{ content: 'w-48' }"
/>
```

--------------------------------

### Select Menu with Virtualization

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/select-menu.md

Enable virtualization for large lists by setting the `virtualize` prop to `true` or an options object. Note that virtualization flattens all groups into a single list.

```html
<template>
  <VSelectMenu
    v-model="value"
    :items="items"
    label="Select with virtualization"
    :virtualize="{
      estimateSize: 32,
      overscan: 12,
    }"
  />
</template>

<script setup>
import { ref } from 'vue'

const value = ref(null)
const items = Array.from({ length: 1000 }, (_, i) => ({
  label: `Option ${i + 1}`,
  value: i + 1,
}))
</script>

```

--------------------------------

### Configure Starter Kit for Editor

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/editor.md

Configure the built-in TipTap StarterKit extension to enable common editor features. This example disables blockquotes and customizes heading levels, dropcursor, and link behavior.

```vue
<script setup lang="ts">
const value = ref('<h1>Hello World</h1>\n')
</script>

<template>
  <B24Editor
    v-model="value"
    :starter-kit="{
      blockquote: false,
      headings: {
        levels: [1, 2, 3, 4]
      },
      dropcursor: {
        color: 'var(--ui-color-accent-main-primary)',
        width: 2
      },
      link: {
        openOnClick: false
      }
    }"
  />
</template>
```

--------------------------------

### Define a Custom Locale

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/3.composables/define-locale.md

Use defineLocale to create a custom locale configuration. This example shows basic setup with a name, code, locale, and an empty messages object.

```vue
<script setup lang="ts">
import type { Messages } from '@bitrix24/b24ui-nuxt'

const locale = defineLocale<Messages>({
  name: 'My custom locale',
  code: 'en',
  locale: 'en',
  dir: 'ltr',
  messages: {
    // implement pairs
  }
})
</script>

<template>
  <B24App :locale="locale">
    <NuxtPage />
  </B24App>
</template>
```

--------------------------------

### Using B24Error in error.vue

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/error.md

Integrate the B24Error component into your `error.vue` file to display Nuxt errors. This example shows the basic setup within a Nuxt application layout.

```vue
<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps({
  error: NuxtError
})
</script>

<template>
  <B24App>
    <B24SidebarLayout :use-light-content="false">

      <B24Error :error="error" />

    </B24SidebarLayout>
  </B24App>
</template>
```

--------------------------------

### Install Bitrix24 UI Vue Plugin (AdonisJS Inertia)

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/1.getting-started/2.installation/2.vue.md

Configure the Bitrix24 UI Vue plugin for an AdonisJS Inertia project. This example is for Vue 3 and Inertia.js integration.

```typescript
import type { DefineComponent } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import b24UiPlugin from '@bitrix24/b24ui-nuxt/vue-plugin'
import { resolvePageComponent } from '@adonisjs/inertia/helpers'
import { createApp, h } from 'vue'

const appName = import.meta.env.VITE_APP_NAME || 'AdonisJS x Bitrix24 UI'

createInertiaApp({
  title: title => (title ? `${title} - ${appName}` : appName),
  resolve: name =>
    resolvePageComponent(
      `../pages/${name}.vue`,
      import.meta.glob<DefineComponent>('../pages/**/*.vue')
    ),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(b24UiPlugin)
      .mount(el)
  }
})
```

--------------------------------

### InputDate with Custom Separator Icon for Range

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/input-date.md

Customize the icon used between the start and end dates in a range selection by using the `separator-icon` prop. This example uses 'RocketIcon' as the separator.

```vue
<script setup lang="ts">
import { ref } from 'vue'

const dateRange = ref({
  start: [2022, 2, 3],
  end: [2022, 2, 20]
})
</script>

<template>
  <InputDate
    v-model="dateRange"
    range
    separator-icon="RocketIcon"
  />
</template>
```

--------------------------------

### Set Radio Group Indicator Position

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/radio-group.md

Use the `indicator` prop to change the position or hide the indicator. Defaults to `start`. This example sets the indicator to `end` and uses the `card` variant.

```javascript
{
  indicator: 'end',
  variant: 'card',
  defaultValue: 'System',
  items:
    - 'System'
    - 'Light'
    - 'Dark'
}
```

--------------------------------

### Clone Project Templates

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/1.getting-started/2.installation/2.vue.md

Clone either the Dashboard or Starter template to begin your project. Remember to replace `<project-name>` with your desired directory name.

```bash
git clone https://github.com/bitrix24/templates-dashboard-vue.git <project-name>
cd <project-name>
pnpm install
pnpm run dev
```

```bash
git clone https://github.com/bitrix24/starter-b24ui-vue.git <project-name>
cd <project-name>
pnpm install
pnpm run dev
```

--------------------------------

### Install Bitrix24 UI Vue Plugin (Laravel Inertia)

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/1.getting-started/2.installation/2.vue.md

Integrate the Bitrix24 UI Vue plugin into a Laravel Inertia project. This setup assumes you are using Vue 3 and Inertia.js.

```typescript
import type { DefineComponent } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import b24UiPlugin from '@bitrix24/b24ui-nuxt/vue-plugin'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
import { createApp, h } from 'vue'

const appName = import.meta.env.VITE_APP_NAME || 'Laravel x Bitrix24 UI'

createInertiaApp({
  title: title => (title ? `${title} - ${appName}` : appName),
  resolve: name =>
    resolvePageComponent(
      `./pages/${name}.vue`,
      import.meta.glob<DefineComponent>('./pages/**/*.vue')
    ),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(b24UiPlugin)
      .mount(el)
  }
})
```

--------------------------------

### Basic Slideover Usage

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/slideover.md

Use the default slot for trigger elements like buttons and the #content slot for the slideover's main content. This example shows a basic setup with a button to open the slideover and a placeholder for its content.

```vue
<template>
  <B24Slideover>
    <B24Button label="Open" />
    <template #content>
      <Placeholder class="h-full m-4" />
    </template>
  </B24Slideover>
</template>

```

--------------------------------

### REPL Playground

Source: https://github.com/bitrix24/b24ui/blob/main/AGENTS.md

Launches the REPL playground for interactive testing.

```bash
pnpm run dev:repl
```

--------------------------------

### Install Python Dependencies

Source: https://github.com/bitrix24/b24ui/blob/main/scripts/b24-self-task/README.md

Installs Python dependencies using a virtual environment. Ensure you have Python 3.7+ installed.

```bash
python -m venv venv
source venv/bin/activate
pip install -r scripts/b24-self-task/requirements.txt
```

--------------------------------

### Code Diff Example

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/4.typography/5.code.md

Illustrates how to display code differences using the 'diff' language, showing changes in module imports.

```diff
export default defineNuxtConfig({
  modules: [
-   '@bitrix24/b24ui'
+   '@bitrix24/b24ui-nuxt'
  ]
})
```

```md
```diff [nuxt.config.ts]
export default defineNuxtConfig({
  modules: [
-   '@bitrix24/b24ui'
+   '@bitrix24/b24ui-nuxt'
  ]
})
```
```

--------------------------------

### Configure Bitrix24 Webhook

Source: https://github.com/bitrix24/b24ui/blob/main/scripts/b24-self-task/README.md

Sets up the Bitrix24 webhook URL in the .env file. Replace the placeholder with your actual webhook.

```bash
B24_WEBHOOK=https://yourdomain.bitrix24.com/rest/1/xxxx/
```

--------------------------------

### Component Creation Workflow Checklist

Source: https://github.com/bitrix24/b24ui/blob/main/AGENTS.md

Use this checklist to track progress when creating a new component. It covers scaffolding, implementation, theming, type export, registration, testing, documentation, and build steps.

```bash
Component: [name]
Progress:
- [ ] 1. Scaffold with CLI: bitrix24-ui make component <name>
- [ ] 2. Implement component in src/runtime/components/
- [ ] 3. Create theme in src/theme/
- [ ] 4. Export types from src/runtime/types/index.ts
- [ ] 5. Register in ThemeDefaults interface (src/runtime/composables/useComponentProps.ts)
- [ ] 6. Write tests in test/components/
- [ ] 7. Create docs in docs/content/docs/2.components/
- [ ] 8. Add playground page
- [ ] 9. Run pnpm run lint
- [ ] 10. Run pnpm run typecheck
- [ ] 11. Run pnpm run test
```

--------------------------------

### Stepper Example - With Custom Slot

Source: https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/stepper.md

Illustrates how to use the `slot` property on an item to apply a custom slot for specific step content.

```APIDOC
### With custom slot

Use the `slot` property to customize a specific item.

You will have access to the following slots:

- `#{{ item.slot }}`{lang="ts-type"}

:component-example{name="stepper-custom-slot-example"}
```