Типова ситуація: замовник хоче 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(),
},
];
Типові компоненти та час налаштування
| Компонент | Час налаштування | Типові use-cases |
|---|---|---|
| Layout | 30 хв | Базова структура адмінки |
| Table | 2 год | Відображення списків з сортуванням |
| Form | 1–2 год | Введення даних з валідацією |
| Menu | 30 хв | Навігація по розділах |
| Modal/Drawer | 30 хв | Спливаючі вікна |
Порівняння з кастомною версткою
Ant Design в 2–3 рази швидше за кастомну верстку. Це підтверджує наш досвід: середній час створення адмін-панелі з 10 сутностями — 8 днів.
| Параметр | Ant Design | Кастомна верстка |
|---|---|---|
| Час розробки типової сторінки | 1–2 дні | 3–5 днів |
| Єдиноподібність компонентів | Гарантовано | Потрібен контроль |
| Адаптивність | З коробки | Ручне налаштування |
| Документація та ком'юніті | Величезне | Відсутнє |
| Підтримка тем | Runtime-тема через токени | Перескладання стилів |
Процес роботи та що входить
- Аналітика — виявляємо типові сторінки та сутності. Описуємо сценарії використання.
- Проектування — налаштовуємо тему, обираємо компоненти. Збираємо прототип на стейджингу.
- Реалізація — верстка сторінок, інтеграція з API. Використовуємо TypeScript та сучасні підходи.
- Тестування — перевірка крос-браузерності, продуктивності (LCP, CLS).
- Деплой — налаштування CI/CD, передача доступів.
Входить в роботу: документація по темі та компонентах, доступи до репозиторію та стейджингу, навчання команди (2–3 години), підтримка протягом місяця після здачі.
Строки та вартість
Налаштування ConfigProvider та теми: 2–4 години. Повний admin-panel з CRUD-операціями: 5–10 днів залежно від кількості сутностей. Вартість розраховується індивідуально після оцінки обсягу робіт. Отримайте консультацію інженера — обговоримо ваш проект і підготуємо оцінку.
Гарантуємо стабільну роботу та дотримання строків. Досвід більше п'яти років та 70+ реалізованих проектів підтверджують надійність. Замовте розробку — ми зв'яжемося з вами протягом дня.