Cladd - opinionated React UI kit для редакторов и сложных интерфейсов

TL;DR

Cladd — это React UI kit, заточенный под плотные интерфейсы (40+ контролов на экране) с продуманной системой вложенности поверхностей, контекстным масштабированием и минимальным boilerplate для оверлеев. Альтернатива headless-подходам для продуктовых разработчиков.

Проблемное поле современных UI-китов

Большинство библиотек компонентов страдают от двух крайностей:

Жёсткие дизайн-системы (MUI, Chakra) навязывают визуальную иерархию, где вложенные карточки требуют кастомного CSS для эмуляции глубины:

<Card>
  <Card sx={{ boxShadow: 'none', border: '1px solid' }}> // Костыли
    <CardBody>...</CardBody>
  </Card>
</Card>

Headless-примитивы (Radix, React Aria) делегируют стилизацию разработчику, что приводит к boilerplate:

<Dialog.Root>
  <Dialog.Trigger asChild>
    <Button>Open</Button>
  </Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay className="..." />
    <Dialog.Content className="...">
      {...}
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

Архитектурные решения Cladd

Контекстная система поверхностей

Вместо ручного управления z-index и тенями, Cladd предлагает 5 уровней вложенности (surface-0…surface-4), где каждый следующий Surface автоматически увеличивает глубину:

<Surface level={0}> // Базовый уровень
  <Surface> // Автоматически level={1}
    <Surface> // level={2}
      {...}
    </Surface>
  </Surface>
</Surface>

Адаптивное масштабирование

Компоненты используют единую шкалу размеров (2xs…2xl), но в плотных компоновках автоматически регулируют отступы:

<Button size="sm">
  <Chip size="sm" /> // Автоматически уменьшится на 8px
</Button>

Динамические оверлеи

Хуки типа useDialog() позволяют управлять модальными окнами без JSX-бойлерплейта:

const dialog = useDialog();

const handleClick = () => {
  dialog.open({
    title: 'Подтверждение',
    content: <DeleteConfirmation />,
    actions: [{ label: 'Удалить', variant: 'danger' }]
  });
};

return <Button onClick={handleClick}>Удалить</Button>;

Практическое применение

Редакторы контента

Для интерфейсов типа Notion или Figma Cladd предоставляет:

Вложенные плавающие панели (<Surface floating>)
Контекстные тулбары с автоматическим позиционированием
Комбинируемые элементы форм:

<FieldGroup>
  <TextInput label="Название" />
  <Select 
    label="Тип"
    options={[...]}
    combobox // Автокомплит
  />
</FieldGroup>

Дашборды

Компоненты DataTable и MetricCard поддерживают:

Виртуализацию строк
Встроенную сортировку/фильтрацию
Адаптивные сетки без медиа-запросов:

<Grid minColumnWidth="300px">
  <MetricCard title="DAU" value="12.4k" trend="up" />
  <MetricCard title="MRR" value="$48.2k" trend="down" />
  {...}
</Grid>

Ограничения

Cladd не подходит для:

Маркетинговых лендингов (нет анимаций/градиентов)
Кастомных дизайн-систем (жёстко зашитая визуальная иерархия)
Не-React проектов

Заключение

Cladd заполняет нишу между “слишком жёсткими” и “слишком абстрактными” UI-китами, предлагая готовые решения для сложных интерфейсов. Библиотека особенно полезна для продуктовых команд, где важна скорость разработки без потери consistency.

Для старта достаточно установки:

npm install @cladd/ui

и подключения провайдера:

import { CladdProvider } from '@cladd/ui';

function App() {
  return (
    <CladdProvider>
      <YourApp />
    </CladdProvider>
  );
}

---

*Источник: [https://www.reddit.com/r/reactjs/comments/1thuf7h/cladd_opinionated_react_ui_kit_for_editors/](https://www.reddit.com/r/reactjs/comments/1thuf7h/cladd_opinionated_react_ui_kit_for_editors/)*