Розробка 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 на нашому сайті.