Chakra UI для React — установка и компоненты

Chakra UI — библиотека React-компонентов с упором на доступность и удобное styling API. Она хорошо подходит для быстрых интерфейсов, где нужны Button, Input, Stack, Box, Dialog и тема без отдельной CSS-системы.

Установка

npm i @chakra-ui/react @emotion/react

В Chakra UI 3 документация рекомендует добавить snippets через CLI и обернуть приложение Provider-компонентом. Это немного отличается от старых уроков по Chakra UI 2.

npx @chakra-ui/cli snippet add

Подключение Provider

import { Provider } from '@/components/ui/provider';

function Root() {
  return (
    <Provider>
      <App />
    </Provider>
  );
}

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

import { Button, HStack, Input } from '@chakra-ui/react';

function SearchForm() {
  return (
    <HStack>
      <Input placeholder="Найти урок" />
      <Button colorPalette="blue">Искать</Button>
    </HStack>
  );
}

Почему Chakra удобна

• Компоненты сразу учитывают доступность.
• Layout можно собирать через Stack, Box, Grid и Flex.
• Стили часто задаются props, без отдельного CSS-файла.
• Тему можно расширять постепенно.

Когда лучше выбрать другую библиотеку

Если нужен большой набор enterprise-компонентов вроде сложных таблиц и фильтров, Ant Design может закрыть больше задач из коробки. Если нужен Material Design, выбирайте MUI. Chakra сильна там, где важны гибкость и быстрый аккуратный UI.

Здесь важно смотреть не на популярность, а на форму будущего интерфейса. Для таблиц и сложных админок чаще удобнее Ant Design, для Material Design — MUI, а для лёгкой кастомизации и быстрых layout-блоков Chakra остаётся сильным вариантом.

Мини-проект: панель настроек

import { Box, Button, HStack, Input, Stack, Text } from '@chakra-ui/react';

function SettingsPanel() {
  return (
    <Box borderWidth="1px" borderRadius="lg" p="4">
      <Stack gap="3">
        <Text fontWeight="bold">Профиль</Text>
        <Input placeholder="Имя" />
        <Input placeholder="Email" />
        <HStack justify="flex-end">
          <Button variant="outline">Отмена</Button>
          <Button colorPalette="blue">Сохранить</Button>
        </HStack>
      </Stack>
    </Box>
  );
}

Как думать в Chakra UI

Chakra делает ставку на композицию примитивов: Box, Stack, HStack, VStack, Text, Button. Сначала соберите структуру этими базовыми компонентами, а потом добавляйте более сложные элементы.

Типовые ошибки

• Следовать старым урокам Chakra UI 2 без проверки версии.
• Пытаться переносить обычный CSS один в один в props.
• Забывать Provider на корне приложения.
• Использовать Chakra только для кнопок, а layout писать хаотично: так теряется польза библиотеки.

Как понять, что Chakra UI вам подходит

Chakra UI хороша там, где нужен быстрый аккуратный интерфейс без отдельной большой CSS-системы. Она особенно удобна для небольших кабинетов, внутренних инструментов, прототипов и проектов, где layout собирается из простых блоков.

Практичная проверка простая: соберите один экран с формой, карточкой, кнопками и адаптивным layout. Если большую часть интерфейса получилось сделать примитивами Chakra без отдельного CSS-файла, библиотека подходит вашему стилю работы.

Проверьте на одном экране

• соберите форму профиля через Box, Stack, Input и Button;
• добавьте состояние ошибки и disabled-кнопку;
• проверьте, не приходится ли постоянно обходить стили библиотеки;
• посмотрите, нравится ли команде props-подход к стилям.

Где чаще возникают сложности

Главная ловушка — брать старый пример из Chakra UI 2 и переносить его в проект на Chakra UI 3 без проверки документации. Установка и Provider в новых версиях отличаются, поэтому перед копированием кода всегда смотрите версию.

Следующий шаг

После базовых компонентов разберите тему проекта: цвета, шрифты, состояния кнопок, размеры полей. Именно на теме становится понятно, будет ли Chakra экономить время на дистанции.