Introduction

Ready-to-use typography styles and utilities for a professional look.

Bitrix24 UI brings beautiful, consistent styling to the Prose components provided by @nuxtjs/mdc. The Nuxt MDC module transforms your markdown into semantic Vue components, and Bitrix24 UI applies its design system so your content automatically adapts to your application's theme.

For Nuxt Content installation and setup, check the Content integration guide.

Usage

The typography system powered by Nuxt MDC's prose components and styled by Bitrix24 UI, provides multiple ways to render styled content:

Markdown Rendering - Use ContentRenderer or MDC component to render markdown with automatic prose styling
Direct Vue Usage - Import and use prose components directly in your Vue templates

With ContentRenderer

The simplest way - your markdown is automatically styled when using <ContentRenderer> component:

pages/[...slug].vue

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

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

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

When you write markdown, Nuxt MDC automatically maps each element to a styled prose component:

# Heading → <ProseH1> (with accessible anchor links)
**bold** → <ProseStrong> (styled according to your theme)
`code` → <ProseCode> (with syntax highlighting)
...and all other markdown syntax is rendered as their corresponding prose components, ensuring consistent design and theming.

With MDC component

For more control over markdown rendering, use the <MDC> component:

<script setup lang="ts">
const value = `# Hello World

Learn more about the **MDC** component in the [documentation](https://github.com/nuxt-modules/mdc).
`
</script>

<template>
  <MDC :value="value" />
</template>

Use this approach when you need to:

Render markdown content from external sources such as APIs or databases
Inject dynamic or custom data into your markdown
Build flexible, dynamic content systems
Safely process and display user-generated markdown

With Prose components

Use prose components directly in Vue templates for maximum control:

<template>
  <ProseTable>
    <ProseThead>
      <ProseTr>
        <ProseTh>Prop</ProseTh>
        <ProseTh>Default</ProseTh>
      </ProseTr>
    </ProseThead>
    <ProseTbody>
      <ProseTr>
        <ProseTd>
          <ProseCode>color</ProseCode>
        </ProseTd>
        <ProseTd>
          <ProseCode>neutral</ProseCode>
        </ProseTd>
      </ProseTr>
    </ProseTbody>
  </ProseTable>
</template>

MDC Syntax

You can include Vue components in markdown files using MDC Syntax.

Regular markdown with bold and italic text.

Use MDC components for rich interactions!

Use pnpm add @bitrix24/b24ui-nuxt to install

pnpm add @bitrix24/b24ui-nuxt

yarn add @bitrix24/b24ui-nuxt

npm install @bitrix24/b24ui-nuxt

bun add @bitrix24/b24ui-nuxt

Regular markdown with **bold** and *italic* text.

::callout{color="air-primary"}
Use MDC components for rich interactions!
::

::tabs

:::tabs-item{label="Installation"}
Use pnpm add @bitrix24/b24ui-nuxt to install
:::

:::tabs-item{label="Usage"}
Import components and use them in your templates
:::

::

::code-group

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

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

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

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

::

Headers and text

Easy-to-read text with carefully designed headings, formatted content, and clear links.