Разработка React-сайтов на Chakra UI: доступные компоненты и тёмная тема
Вы интегрируете стороннюю дизайн-систему в React-приложение, а на выходе получаете разнородные HTML/CSS-классы, проблема с тёмной темой и недоступные интерактивные элементы. Мы сталкивались с этим на десятках проектов, поэтому для клиентов с фокусом на доступность и быструю вёрстку предлагаем Chakra UI. За 5+ лет в веб-разработке и 50+ проектах на React мы выработали подход, при котором вёрстка посадочной страницы занимает 1-2 дня, а не неделю. Экономия бюджета на вёрстке достигает 30% за счёт готовых компонентов — это подтверждается отзывами клиентов.
Chakra UI — не очередная UI-библиотека, а система, где каждый компонент из коробки соответствует WCAG 2.1. Style props API позволяет управлять CSS прямо в JSX, отказываясь от лишних файлов. Встроенная тёмная тема строится на семантических токенах, которые автоматически переключают цвета без пересборки. Например, в одном проекте мы заменили 500 строк CSS-переменных на 20 строк токенов — тёмная тема заработала без единого бага.
Как Chakra UI решает проблему тёмной темы?
До появления Chakra UI разработчики хранили цветовые переменные в CSS и вручную меняли их через [data-theme="dark"]. В Chakra v3 тёмная тема — это встроенная фича: в описании токена через _dark задаётся цвет для тёмного режима. Провайдер автоматически подхватывает атрибут data-theme на <html> и применяет правильную палитру. Пример настройки:
import { createSystem, defaultConfig, defineConfig } from '@chakra-ui/react';
const customConfig = defineConfig({
theme: {
tokens: {
colors: {
brand: { 500: { value: '#3b82f6' } },
},
},
semanticTokens: {
colors: {
'bg.canvas': { value: { base: '#f9fafb', _dark: '#0f172a' } },
},
},
},
});
const system = createSystem(defaultConfig, customConfig);
export default system;
Теперь компонент Box bg="bg.canvas" сам адаптируется к теме. Никаких медиа-фич, никаких переключений классов. Стоимость поддержки такой темы снижается в 2-3 раза по сравнению с кастомными решениями.
Почему Chakra UI быстрее Material-UI для MVP?
| Параметр | Chakra UI (v3) | Material-UI (MUI) |
|---|---|---|
| Style props | Да, встроены | Через sx-prop, но больше boilerplate |
| Тёмная тема | Токены + _dark, 5 минут |
Темы через ThemeProvider, ~15 минут |
| Accessibility | WCAG AA из коробки | Частично, требует доработок |
| Размер бандла | ~25 kB gzip | ~40 kB gzip |
| Адаптивность | Объекты в props: w={{ base: 'full', md: '50%' }} |
Через useMediaQuery или breakpoints в sx |
Chakra UI выигрывает по скорости прототипирования: в 2-3 раза меньше кода для адаптивной grid-сетки и форм. Дополнительная экономия — встроенная система токенов, которая исключает дублирование стилей.
Сравнение Chakra UI v2 и v3
| Особенность | Chakra UI v2 | Chakra UI v3 |
|---|---|---|
| Провайдер | ChakraProvider + ColorModeScript |
Единый ChakraProvider с конфигом |
| Токены | CSS-переменные + useColorMode |
Семантические токены с _dark |
| Style props | Через chakra factory |
Встроены во все компоненты |
| Размер | ~30 kB gzip | ~25 kB gzip |
Миграция с v2 на v3 требует правки провайдера и замены useColorMode на _dark токены, но окупается за счёт упрощённой архитектуры.
Как настроить тему Chakra UI за 3 шага?
-
Установите пакет:
npm install @chakra-ui/react @emotion/react. - Создайте конфигурацию в отдельном файле (как в примере выше), определите базовые токены и семантические токены для тёмной темы.
- Подключите провайдер в корне приложения:
import { ChakraProvider } from '@chakra-ui/react';
import system from './theme/system';
function Root() {
return (
<ChakraProvider value={system}>
<App />
</ChakraProvider>
);
}
После этого во всех компонентах доступны style props и автоматическая поддержка тёмной темы.
Вёрстка hero-секции с style props
Style props — основа ускорения: адаптивный padding задаётся объектом py={{ base: '12', md: '20', lg: '28' }}. Вся секция пишется в одном JSX-блоке:
import { Box, Flex, Heading, Text, Button, Stack } from '@chakra-ui/react';
const Hero = () => (
<Box as="section" bg="bg.canvas" py={{ base: '12', md: '20' }}>
<Flex maxW="7xl" mx="auto" direction={{ base: 'column', lg: 'row' }}>
<Box flex="1">
<Heading as="h1" size={{ base: '2xl', lg: '4xl' }} color="text.primary">
Заголовок продукта
</Heading>
<Text fontSize={{ base: 'md', lg: 'lg' }} color="text.muted" mb="8">
Описание ценности
</Text>
<Button colorPalette="brand" size="lg">Начать бесплатно</Button>
</Box>
</Flex>
</Box>
);
Сетка карточек и форма с валидацией
Для карточек используем SimpleGrid, который автоматически колонки в зависимости от breakpoint. Форма — стандартный Field + Input, валидация через React Hook Form и Zod:
import { Field, Input, Button, Stack } from '@chakra-ui/react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
const schema = z.object({ name: z.string().min(2) });
const Form = () => {
const { register, handleSubmit, formState: { errors } } = useForm({ resolver: zodResolver(schema) });
return (
<Stack gap="5">
<Field.Root invalid={!!errors.name}>
<Field.Label>Имя</Field.Label>
<Input {...register('name')} />
{errors.name && <Field.ErrorText>{errors.name.message}</Field.ErrorText>}
</Field.Root>
<Button type="submit">Отправить</Button>
</Stack>
);
};
Цветовой режим через семантические токены
В Chakra v3 не нужно менять CSS — достаточно хука useColorMode. Пример кнопки для переключения описан выше. Для экономии места и снижения избыточности кода, мы часто выносим логику переключения в отдельный хук. Гарантируем, что каждый компонент пройдёт тестирование на Core Web Vitals: оптимизация бандла, lazy-loading иконок, исключение N+1 запросов.
Распространённые ошибки при вёрстке на Chakra UI
- Использование
!important— переопределение токенов черезcssprop ломает систему. - Отсутствие
_darkв семантических токенах — тёмная тема не отображается. - Некорректный breakpoint
base— без него адаптивность ломается на мобильных. - Игнорирование
asprop — семантическая вёрстка нарушается. - Прямое манипулирование DOM вместо использования state — компоненты Chakra UI реактивны.
Что входит в работу по вёрстке на Chakra UI?
Мы предоставляем не только готовый код, но и документацию по токенам, компонентам и цветовой схеме. В состав deliverables входят:
- Настроенная тема Chakra UI с семантическими цветами и шрифтами
- Все страницы проекта, адаптированные под мобильные и десктопные Breakpoints
- Формы с валидацией (React Hook Form + Zod)
- Документация по стилям (Storybook или Markdown)
- Доступ к репозиторию с историей коммитов
- Обучение команды (1-2 часа) по style props и настройке темы
Свяжитесь с нами — мы предложим решение под ключ с Chakra UI. Экономия бюджета на вёрстке достигает 30% за счёт готовых компонентов и отсутствия кастомных CSS-классов.
Сроки и стоимость
Ориентировочные сроки:
- Настройка системы и темы — 3-4 часа
- Посадочная страница — 1-2 дня
- Продуктовый сайт (5+ разделов, форма, дашборд) — 4-7 дней
Итоговая стоимость рассчитывается индивидуально. Закажите консультацию, чтобы получить точную оценку. У каждого клиента — единый менеджер и полный технический контроль (сертифицированные специалисты, 5+ лет опыта с React).
У вас проект на React и нужна вёрстка с тёмной темой и доступностью? Закажите решение под ключ с Chakra UI на нашем сайте.