v2.7.1

Prompt Soon

Show pre‑built AI prompts with one‑click copying and IDE integration.
GitHub
Nuxt UI

Usage

Use the prompt component to display a pre-built AI prompt that users can copy to their clipboard or open directly in their IDE. The description prop is shown as the visible label, while the default slot contains the prompt text that gets copied.

Build a dashboard layout with Bitrix24 UI.

::prompt{description="Build a dashboard layout with Bitrix24 UI."}
You are a Bitrix24 UI expert. Help me build a dashboard layout with a collapsible sidebar and a sticky top navbar.

Requirements:
- Use `B24DashboardPanel`, `B24DashboardSidebar`, and `B24DashboardNavbar`
- Use semantic color tokens like `bg-elevated` and `text-muted` for theming
- The sidebar should include navigation links with icons using `B24NavigationMenu`
- The navbar should display a search button, and a user dropdown menu
- The layout must be fully responsive and collapse the sidebar on mobile

::

Actions

Use the actions prop to control which buttons are displayed. Defaults to ["copy"]. Available actions are copy, cursor and windsurf.

Add a color mode toggle.

::prompt{description="Add a color mode toggle." actions="copy,cursor,windsurf"}
Add a color mode toggle to my Nuxt app.

Requirements:
- Use `useColorMode` from `'@bitrix24/b24ui-nuxt/composables` to manage the current mode
- Render a `B24Button` with `color="air-tertiary"` that cycles between `light`, `dark`, and `system` on click
- Update the button icon dynamically: `SunIconAir` for light, `MoonIconAir` for dark, `ScreenIcon` for system
- Add a tooltip using `B24Tooltip` that shows the current active mode

::

API

Props

Prop Default Type
description string
iconIconComponent
iconNameIconComponent

Resolved through the icon registry (dictionary/iconRegistry.ts) with a fallback to short aliases (dictionary/icons.ts). Ignored when icon is set.

actions["copy"] ("copy" | "cursor" | "windsurf")[]
b24ui { root?: ClassNameValue; icon?: ClassNameValue; content?: ClassNameValue; description?: ClassNameValue; actions?: ClassNameValue; }

Slots

Slot Type
default{}

Theme

https://github.com/bitrix24/b24ui/tree/main/src/theme/prompt.ts
export default {
  slots: {
    root: 'relative flex flex-wrap items-center gap-2 border border-muted bg-muted rounded-md px-4 py-3 my-5 last:mb-0',
    icon: 'size-4 shrink-0 text-highlighted',
    content: 'min-w-0',
    description: 'text-sm/6 text-description font-medium',
    actions: 'flex flex-wrap items-center gap-1.5 ms-auto'
  }
}

Kbd

Steps