Верстка та кастомізація React-інтерфейсів з Ant Design

Типова ситуація: замовник хоче CRM з 30 екранами, 10 сутностями і складною звітністю. Розробка з нуля — 3 місяці та високий бюджет. З Ant Design ми скорочуємо строк до 2–3 тижнів, а вартість — на 40–50%. За п'ять років і 70+ проектів ми накопичили бібліотеку шаблонів, які покривають 90% сценаріїв. Наприклад, у проекті для логістичної компанії ми замінили самописну адмінку на Ant Design і скоротили час розробки нового функціоналу з 2 тижнів до 3 днів. Клієнт заощадив $12 000 на розробці. У цій статті я розповім, як налаштувати Ant Design 5, кастомізувати тему та зібрати типові сторінки. Зв'яжіться з нами, щоб обговорити ваш проект та отримати попередню оцінку.

Чому Ant Design 5 — стандарт для enterprise-інтерфейсів?

Ant Design — компонентна бібліотека від Alibaba, і головна її перевага — єдиноподібність. Усі компоненти дотримуються одних принципів: однакові відступи, кольори, поведінка. Це економить години узгоджень з дизайнером. Ant Design 5 відмовився від Less на користь CSS-in-JS (@ant-design/cssinjs), що дає runtime-тему та відсутність конфліктів стилів — про це йдеться в офіційній документації Ant Design.

Налаштування теми через CSS-in-JS та Design Tokens

Замість перевизначення Less-змінних використовуємо Design Tokens. Це об'єкт з алгоритмом та налаштуваннями компонентів. Приклад базової теми:

// src/antd-theme.ts import { ThemeConfig, theme as antTheme } from 'antd'; const { defaultAlgorithm, darkAlgorithm } = antTheme; const lightTheme: ThemeConfig = { algorithm: defaultAlgorithm, token: { // Базові кольори colorPrimary: '#2563eb', colorSuccess: '#16a34a', colorWarning: '#d97706', colorError: '#dc2626', colorInfo: '#0891b2', // Типографіка fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif', fontSize: 14, fontSizeLG: 16, fontSizeHeading1: 38, fontSizeHeading2: 30, fontSizeHeading3: 24, // Відступи padding: 16, paddingLG: 24, paddingXL: 32, margin: 16, marginLG: 24, // Форма borderRadius: 8, borderRadiusLG: 12, // Кольори фону colorBgContainer: '#ffffff', colorBgLayout: '#f5f7fa', colorBorderSecondary: '#e5e7eb', }, components: { Button: { controlHeight: 40, controlHeightLG: 48, controlHeightSM: 32, paddingContentHorizontal: 20, borderRadius: 8, }, Card: { paddingLG: 24, borderRadius: 12, }, Table: { headerBg: '#f9fafb', borderColor: '#f3f4f6', }, Form: { labelColor: '#374151', labelFontSize: 14, }, Menu: { itemBorderRadius: 8, }, }, }; export default lightTheme; 

Як кастомізація теми впливає на продуктивність?

Runtime-тема через CSS-in-JS не знижує продуктивність, оскільки токени компілюються в CSS-змінні. Ми тестували на проектах з 50+ компонентами — різниця в швидкості рендерингу менше 5%. Це дозволяє змінювати тему на льоту без перескладання, що критично для white-label рішень. Наприклад, для клієнта з fintech ми налаштували 12 тем під різні продукти, і перемикання між ними відбувається без перезавантаження сторінки.

Структура сторінки з Ant Design Layout

Типовий макет: Sider зліва, Header з хлібними крихтами та сповіщеннями, Content з контентом, Footer. Sider може бути collapsible.

import { Layout, Menu, Breadcrumb, Avatar, Badge, Space } from 'antd'; import { BellOutlined, UserOutlined, MenuFoldOutlined } from '@ant-design/icons'; import { useState } from 'react'; const { Header, Sider, Content, Footer } = Layout; const AppLayout: FC<{ children: ReactNode }> = ({ children }) => { const [collapsed, setCollapsed] = useState(false); return ( <Layout style={{ minHeight: '100vh' }}> <Sider collapsible collapsed={collapsed} onCollapse={setCollapsed} theme="light" style={{ boxShadow: '1px 0 8px rgba(0,0,0,0.06)', overflow: 'auto', position: 'sticky', top: 0, height: '100vh', }} > <div style={{ padding: '16px 24px', fontWeight: 700, fontSize: 18 }}> {collapsed ? 'L' : 'Logo'} </div> <Menu mode="inline" defaultSelectedKeys={['dashboard']} items={menuItems} /> </Sider> <Layout> <Header style={{ background: '#fff', padding: '0 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid #f3f4f6', }} > <Breadcrumb items={breadcrumbItems} /> <Space size={16}> <Badge count={3}> <BellOutlined style={{ fontSize: 18 }} /> </Badge> <Avatar icon={<UserOutlined />} /> </Space> </Header> <Content style={{ margin: 24 }}> {children} </Content> <Footer style={{ textAlign: 'center', color: '#9ca3af' }}> © Company. All rights reserved. </Footer> </Layout> </Layout> ); }; 

Форми з валідацією

Ant Design Form підтримує декларативні правила. Обробка відправки з завантаженням та повідомленнями.

import { Form, Input, Select, Button, message } from 'antd'; interface ContactFormValues { name: string; email: string; department: string; message: string; } const ContactForm = () => { const [form] = Form.useForm<ContactFormValues>(); const [loading, setLoading] = useState(false); const onFinish = async (values: ContactFormValues) => { setLoading(true); try { await submitContact(values); message.success('Повідомлення відправлено'); form.resetFields(); } catch { message.error('Помилка відправки'); } finally { setLoading(false); } }; return ( <Form form={form} layout="vertical" onFinish={onFinish} requiredMark="optional" > <Form.Item name="name" label="Ім'я" rules={[{ required: true, message: "Введіть ім'я" }]} > <Input placeholder="Іван Іванов" size="large" /> </Form.Item> <Form.Item name="email" label="Email" rules={[ { required: true, message: 'Введіть email' }, { type: 'email', message: 'Некорректний email' }, ]} > <Input type="email" placeholder="[email protected]" size="large" /> </Form.Item> <Form.Item name="department" label="Відділ"> <Select size="large" placeholder="Оберіть відділ" options={[ { value: 'sales', label: 'Продажі' }, { value: 'support', label: 'Підтримка' }, ]} /> </Form.Item> <Form.Item name="message" label="Повідомлення" rules={[{ required: true, min: 10, message: 'Мінімум 10 символів' }]} > <Input.TextArea rows={4} placeholder="Опишіть запит..." showCount maxLength={500} /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit" size="large" loading={loading} block > Відправити </Button> </Form.Item> </Form> ); }; 

Таблиці з сортуванням та фільтрацією

Table — ключовий компонент для роботи з даними. Ant Design Table надає вбудоване сортування, фільтрацію та кастомний рендер. Достатньо визначити масив columns з типом ColumnsType та передати дані в Table. Для сортування вказуємо sorter, для фільтрації — filters. Приклад коду можна розгорнути нижче.

import { Table, Tag, Space } from 'antd'; import type { ColumnsType } from 'antd/es/table'; interface DataItem { key: string; name: string; status: 'active' | 'inactive' | 'pending'; created: string; } const columns: ColumnsType<DataItem> = [ { title: 'Назва', dataIndex: 'name', sorter: (a, b) => a.name.localeCompare(b.name), }, { title: 'Статус', dataIndex: 'status', filters: [ { text: 'Активен', value: 'active' }, { text: 'Неактивен', value: 'inactive' }, ], onFilter: (value, record) => record.status === value, render: (status) => ( <Tag color={status === 'active' ? 'green' : status === 'pending' ? 'orange' : 'red'}> {status === 'active' ? 'Активен' : status === 'pending' ? 'Ожидание' : 'Неактивен'} </Tag> ), }, { title: 'Дата створення', dataIndex: 'created', sorter: (a, b) => new Date(a.created).getTime() - new Date(b.created).getTime(), }, ]; 

Типові компоненти та час налаштування

Порівняння з кастомною версткою

Ant Design в 2–3 рази швидше за кастомну верстку. Це підтверджує наш досвід: середній час створення адмін-панелі з 10 сутностями — 8 днів.

Процес роботи та що входить

1. Аналітика — виявляємо типові сторінки та сутності. Описуємо сценарії використання.
2. Проектування — налаштовуємо тему, обираємо компоненти. Збираємо прототип на стейджингу.
3. Реалізація — верстка сторінок, інтеграція з API. Використовуємо TypeScript та сучасні підходи.
4. Тестування — перевірка крос-браузерності, продуктивності (LCP, CLS).
5. Деплой — налаштування CI/CD, передача доступів.

Входить в роботу: документація по темі та компонентах, доступи до репозиторію та стейджингу, навчання команди (2–3 години), підтримка протягом місяця після здачі.

Строки та вартість

Налаштування ConfigProvider та теми: 2–4 години. Повний admin-panel з CRUD-операціями: 5–10 днів залежно від кількості сутностей. Вартість розраховується індивідуально після оцінки обсягу робіт. Отримайте консультацію інженера — обговоримо ваш проект і підготуємо оцінку.

Гарантуємо стабільну роботу та дотримання строків. Досвід більше п'яти років та 70+ реалізованих проектів підтверджують надійність. Замовте розробку — ми зв'яжемося з вами протягом дня.