Да

Нет

Да

Нет

Да

Нет

Нужен UI-элемент

Компонент существует в
src/components/ui/?

Использовать составной компонент
(Button, Card, Badge)

Стандартный HTML-элемент
со стилизацией?

Использовать Block/Box
с пропом component

Сложная структура
макета?

Компоновать Grid/Flex/Stack
с примитивами

Создать пользовательский компонент
из примитивов

Базовый рабочий процесс (5.1)

Продвинутый рабочий процесс (5.2)

Пропы вариантов

Отрендеренные элементы

проп component

Примитивные компоненты

применяется к

применяется к

применяется к

применяется к

Block
(семантический контейнер)

Box
(гибкий примитив)

component='form'

component='label'

component='input'

component='textarea'

component='select'

<form>

<label>

<input>

<textarea>

<select>

p, m, px, py, и т.д.

w, h, maxW, minH

rounded, border, shadow

bg, c, borderColor

<Block 
  component="form"
  w="full"
  maxW="md"
  p="lg"
  rounded="lg"
  shadow="md"
  bg="white"
>
  {/* Поля формы */}
</Block>

<Box 
  component="input"
  type="text"
  placeholder="Enter your name"
  w="full"
  p="md"
  rounded="md"
  border="default"
  borderColor="gray-300"
/>

<Box 
  component="input"
  type="text"
  w="full"
  p="md"
  rounded="lg"
  border="default"
  bg="white"
  c="gray-900"
  className="focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/>

<Box 
  component="input"
  type="password"
  placeholder="Password"
  w="full"
  p="md"
  rounded="md"
  border="default"
  borderColor="gray-300"
/>

<Box 
  component="input"
  type="number"
  placeholder="Age"
  w="full"
  p="md"
  rounded="md"
  border="default"
  min={0}
  max={120}
/>

<Box 
  component="textarea"
  rows={4}
  placeholder="Enter your message"
  w="full"
  p="md"
  rounded="md"
  border="default"
  borderColor="gray-300"
  className="resize-none"
/>

<Box 
  component="textarea"
  placeholder="Description"
  w="full"
  p="md"
  rounded="lg"
  border="default"
  minH="32"
  className="resize-y"
/>

Block component='form'
обработчик onSubmit
Макет: w='full' maxW='lg' p='lg'
Стиль: rounded='lg' shadow='lg' bg='white'

Block (группа поля имени)
w='full' space-y-2

Box component='label'
c='gray-700' text-sm font-medium

Box component='input'
type='text' name='name' required
w='full' p='md' rounded='md'
border='default' borderColor='gray-300'

Block (группа поля email)
w='full' space-y-2

Box component='label'
c='gray-700' text-sm font-medium

Box component='input'
type='email' name='email' required
w='full' p='md' rounded='md'

Block (группа поля сообщения)
w='full' space-y-2

Box component='label'
c='gray-700' text-sm font-medium

Box component='textarea'
rows=5 name='message' required
w='full' p='md' minH='32'
resize-none focus:ring-2

Button type='submit'
w='full' size='lg' variant='default'

<Block 
  component="form"
  w="full"
  maxW="2xl"
  p="lg"
  rounded="lg"
  shadow="md"
  bg="white"
>
  <Box 
    display="grid" 
    className="grid-cols-1 md:grid-cols-2 gap-6"
  >
    {/* Поле имени */}
    <Block className="space-y-2">
      <Box component="label" className="text-sm font-medium">
        First Name
      </Box>
      <Box 
        component="input"
        type="text"
        w="full"
        p="md"
        rounded="md"
        border="default"
      />
    </Block>

    {/* Поле фамилии */}
    <Block className="space-y-2">
      <Box component="label" className="text-sm font-medium">
        Last Name
      </Box>
      <Box 
        component="input"
        type="text"
        w="full"
        p="md"
        rounded="md"
        border="default"
      />
    </Block>
  </Box>
</Block>

function ValidatedInput({ error, label, ...props }) {
  return (
    <Block w="full" className="space-y-2">
      <Box component="label" c="gray-700" className="text-sm font-medium">
        {label}
      </Box>
      <Box 
        component="input"
        w="full"
        p="md"
        rounded="md"
        border="default"
        borderColor={error ? "red-500" : "gray-300"}
        bg={error ? "red-50" : "white"}
        className={error ? "focus:ring-red-500" : "focus:ring-blue-500"}
        {...props}
      />
      {error && (
        <Box c="red-600" className="text-sm">
          {error}
        </Box>
      )}
    </Block>
  );
}

<Box 
  component="input"
  // Варианты покрывают структуру
  w="full"
  p="md"
  rounded="md"
  border="default"
  bg="white"
  // className покрывает интерактивные состояния
  className="focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/>

управляет

отображает

рендерит

Пользовательский компонент ValidatedInput

Обёртка Block
w='full' space-y-2

Box component='label'
c='gray-700'
text-sm font-medium

Box component='input'
w='full' p='md'
rounded='md' border='default'
Условно: borderColor, bg

Box (условный рендер)
c='red-600' text-sm
Отображает сообщение об ошибке

Пропы:
- error (string | undefined)
- label (string)
- ...props (HTML-атрибуты)

Продвинутый рабочий процесс (5.2)

Базовый рабочий процесс (5.1)

Да

Нет

Готовые компоненты существуют

Card, Button, Badge,
Title, Text, Image, Icon

Использовать составные компоненты
из src/components/ui/

Пример:
<Card p='lg' rounded='xl'>

Пользовательские требования

Элементы форм, пользовательские виджеты,
уникальные макеты

Компоновать примитивы
из src/core/ui/

Пример:
<Block component='form'>
<Box component='input'/>

Компонент существует
в библиотеке?