MDX-компоненты для статей

2026-02-18

MDX

Зачем кастомные компоненты?

Обычный Markdown поддерживает только базовое форматирование. MDX позволяет использовать React-компоненты прямо внутри статей — интерактивные табы, деревья файлов, блоки скачивания и многое другое.

Ниже — все доступные компоненты с живыми примерами.

Callout

Выделенные блоки для важной информации. Четыре типа:

Info — общая информация и подсказки для читателя.

Tip — полезный совет, который сэкономит время.

Warning — предупреждение о возможных проблемах.

Error — критичная ошибка или важное ограничение.

<Callout type="info">Текст подсказки</Callout>
<Callout type="tip">Полезный совет</Callout>
<Callout type="warning">Будьте осторожны</Callout>
<Callout type="error">Критичная ошибка</Callout>

Steps

Пошаговые инструкции с нумерацией:

Установка

Установи зависимости через пакетный менеджер.

Настройка

Создай конфигурационный файл в корне проекта.

Запуск

Запусти dev-сервер и проверь результат.

<Steps>
### Установка
Описание шага
 
### Настройка
Описание шага
 
### Запуск
Описание шага
</Steps>

Tabs

Переключение между вариантами контента:

npm install next react react-dom

<Tabs storageKey="install-pm">
  <Tab label="npm">npm install ...</Tab>
  <Tab label="yarn">yarn add ...</Tab>
  <Tab label="pnpm">pnpm add ...</Tab>
</Tabs>

Добавь prop storageKey="my-key" чтобы выбор таба сохранялся в localStorage.

Table

Таблицы можно делать двумя способами:

Markdown-таблица (через |) — быстро для простых случаев.
<Table /> — когда нужен “наш” стиль, подпись, выравнивание, ширины колонок и React-контент внутри ячеек.

В MDX надёжнее использовать синтаксис с вложенными компонентами (<Table.Head />, <Table.Row />, …), а не массивы в пропсах.

Обычная таблица (Table)

Компоненты (обычная)
Компонент	Описание
`Callout`	Выделенные блоки
`Tabs`	Переключение между вариантами контента

<Table caption="Компоненты (обычная)">
  <Table.Head>
    <Table.Row>
      <Table.Th>Компонент</Table.Th>
      <Table.Th width="65%">Описание</Table.Th>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Td><code>Callout</code></Table.Td>
      <Table.Td>Выделенные блоки</Table.Td>
    </Table.Row>
  </Table.Body>
</Table>

Cards

Сетка карточек для навигации или обзора:

▲

Next.js

Фреймворк для React с серверным рендерингом и статической генерацией.

🎭

Motion

Библиотека анимаций с spring-физикой и жестами.

<Cards cols={2}>
  <Card title="Next.js" icon="▲">Описание</Card>
  <Card title="Motion" icon="🎭">Описание</Card>
</Cards>

Карточка с ссылкой:

<Card title="GitHub" icon="🔗" href="https://github.com">
  Откроется в новой вкладке
</Card>

CodeBlock

Блоки кода с подсветкой синтаксиса и кнопкой копирования — создаются автоматически из markdown-разметки:

```js
const greeting = "Привет, мир!";
console.log(greeting);
```

Результат:

const greeting = "Привет, мир!";
console.log(greeting);

Поддерживаются все популярные языки: js, jsx, ts, css, php, bash, json и другие.

FileTree

Визуализация структуры файлов и папок:

Header.jsx
Footer.jsx
globals.css
package.json
next.config.mjs

<FileTree>
  <Folder name="src" defaultOpen>
    <Folder name="components" defaultOpen>
      <File name="Header.jsx" />
    </Folder>
    <File name="globals.css" />
  </Folder>
  <File name="package.json" />
</FileTree>

Папки кликабельны — можно раскрывать и сворачивать. Prop defaultOpen открывает папку по умолчанию.

Download

Блок для скачивания файлов:

Скачать пример проекта

Шаблон Next.js с настроенными MDX-компонентами

24 KB

<Download
  href="/files/example.zip"
  title="Скачать пример проекта"
  description="Описание файла"
  size="24 KB"
/>

Работает и с внешними ссылками — для них автоматически добавляется target="_blank":

<Download
  href="https://github.com/user/repo/archive/main.zip"
  title="Скачать с GitHub"
/>

Bleed

Контент на всю ширину экрана, выходящий за пределы контейнера статьи:

<Bleed>
  <img src="/images/wide-screenshot.png" alt="Скриншот" />
</Bleed>

Стандартный Markdown

Помимо компонентов, поддерживается весь стандартный Markdown:

Жирный текст и курсив
Ссылки с подчёркиванием
Инлайн-код с подсветкой
Списки, таблицы, цитаты

Цитата — выделяется бордером и фоном

Компонент	Описание
Callout	Выделенные блоки
Tabs	Переключатели
FileTree	Дерево файлов
Download	Кнопка скачивания