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