DevTrends Logo

Как Cloudflare строит интерфейсы — заглядываем под капот дизайн-системы Kumo

01 May, 2026
⭐ 1,925 🔱 114 👥 8

Вы когда-нибудь задумывались, как огромные компании вроде Cloudflare умудряются сохранять единообразие во всех своих сервисах? Когда у тебя сотни дашбордов, инструментов для аналитики и настроек безопасности, поддерживать порядок в UI становится настоящим вызовом. Недавно ребята из Cloudflare открыли исходный код своей библиотеки компонентов под названием Kumo, и это отличный повод разобраться, как устроена современная дизайн-система «здорового человека».

Почему это не просто «очередной UI-кит»?

На рынке полно библиотек: MUI, Ant Design, Radix. Казалось бы, зачем нам еще одна? Но Kumo заслуживает внимания по нескольким причинам.

Во-первых, это не просто набор кнопок, а полноценный фреймворк, построенный на базе Base UI. Если вы не знакомы с Base UI, то это проект от создателей Material UI, который фокусируется на «headless» подходе. Это значит, что вся сложная логика — управление фокусом, доступность (ARIA), работа с клавиатурой — уже реализована, а визуальная часть (стили) остается полностью на усмотрение разработчика.

Kumo берет этот мощный фундамент и «одевает» его в фирменный стиль Cloudflare. В итоге мы получаем инструмент, который:

  1. Безупречно доступен: Вам не нужно гадать, как сделать модальное окно удобным для пользователей с программами экранного доступа.
  2. Легко кастомизируется: Благодаря грамотной системе токенов.
  3. Готов к продакшену: Это не пет-проект, а код, который работает в сервисах, обслуживающих значительную часть мирового интернет-трафика.

Что внутри: ключевые фишки

1. Умный импорт и Tree-Shaking

Одна из главных проблем больших библиотек — лишний вес в бандле. В Kumo об этом позаботились. Вы можете импортировать компоненты как обычно, а можете использовать точечные импорты:

// Берем только то, что нужно, не раздувая бандл
import { Button } from "@cloudflare/kumo/components/button";

2. Кросс-платформенность «дизайнер — разработчик»

Интересно, что проект включает в себя не только React-компоненты, но и Figma-плагин. Это решает вечную проблему: когда дизайнер рисует одно, а разработчик видит в коде другое. Плагин позволяет синхронизировать токены (цвета, отступы, шрифты) напрямую из Figma в код.

3. CLI для документации

Знакомая ситуация: вы пишете код и забыли, какие пропсы принимает компонент. Лезть в браузер и искать документацию? В Kumo это можно сделать прямо в терминале:

npx @cloudflare/kumo doc Button

Команда выведет справку по компоненту прямо в консоль. Это чертовски удобно и экономит время.

image

Технический стек и архитектура

Kumo написан на TypeScript (что в 2024-2025 годах уже стандарт де-факто) и использует современные инструменты:

  • React как база.
  • Base UI для примитивов.
  • Phosphor Icons для иконок (очень эстетичный и легкий набор).
  • pnpm для управления монорепозиторием.

Интересная деталь: в репозитории есть файл AGENTS.md. Cloudflare явно смотрит в будущее и готовит свою документацию так, чтобы ее было удобно «скармливать» ИИ-агентам. Это тонкий намек на то, что скоро наши интерфейсы будут писать (или хотя бы собирать) нейронки, и Kumo к этому готов.

Как начать пользоваться?

Установка стандартная, но обратите внимание на peer dependencies:

pnpm add @cloudflare/kumo react react-dom @phosphor-icons/react

После этого импортируйте стили и нужные компоненты:

import { Button, Input, Dialog } from "@cloudflare/kumo";
import "@cloudflare/kumo/styles";

function App() {
  return (
    <Dialog title="Привет, Kumo!">
      <Input placeholder="Введите что-нибудь..." />
      <Button variant="primary">Отправить</Button>
    </Dialog>
  );
}

Стоит ли внедрять Kumo в свой проект?

Если вы ищете надежную, эстетичную и максимально доступную библиотеку компонентов, Kumo — отличный кандидат. Особенно он понравится тем, кто:

  • Ценит чистоту кода и минимализм.
  • Не хочет тратить часы на настройку доступности (accessibility).
  • Любит экосистему Cloudflare и их подход к разработке.

Конечно, если вам нужен огромный набор специфических виджетов (типа сложных графиков или навороченных таблиц «из коробки»), возможно, стоит посмотреть в сторону более тяжеловесных решений. Но для современных веб-приложений Kumo предоставляет идеальный баланс между легкостью и функциональностью.

В моей практике такие «открытые» дизайн-системы от крупных игроков часто становятся источником вдохновения для собственных решений. Даже если вы не планируете использовать Kumo целиком, заглянуть в его исходники и посмотреть, как реализованы паттерны и работа с токенами — бесценный опыт.

Полезные ссылки:

А как вы подходите к выбору UI-библиотеки? Пишете свое или доверяете гигантам индустрии? Пишите в комментариях!

Проект на GitHub