Ant Design Guide

The Ant Design template provides a comprehensive enterprise-grade component ecosystem built on Ant Design 5. It includes 17 CustomField types, 22 UI primitives, and 4 common components — all pre-styled with a professional design system that supports internationalization and dark mode out of the box.

Components are structured in the same consistent directory layout, wrapping Ant Design components:

src/components/
├── common/
│   ├── button/
│   │   └── action-button.component.tsx   # antd Button + Tooltip
│   ├── dialog/
│   │   └── dialog-wrapper.component.tsx   # antd Modal wrapper
│   ├── DynamicTable/
│   │   └── dynamic-table.component.tsx    # antd Table wrapper
│   ├── fields/
│   │   └── assets/
│   │       ├── components/    # 17 individual fields
│   │       └── interface/
│   └── pagination/
│       └── pagination.component.tsx       # antd Pagination
└── ui/                         # 22 antd primitives
    ├── button, card, dialog...
    ├── select, switch, table, tabs...
    └── tooltip, popover, drawer...

Ant Design fields use react-hook-form's Controller to bridge form state with antd components. Each field wraps the appropriate antd input (Input, InputNumber, Select, DatePicker, etc.) with consistent props.

import { CustomField } from '@/components/common/fields/cusInputField.component';

<CustomField.Text
  form={form}
  name="username"
  labelName="Username"
  placeholder="Enter username"
  required
/>

Dual-mode: When form is provided, it uses Controller for validation. Without form, it renders standalone with value/setValue.

17 field components available via CustomField.*:

Four shared components adapted for Ant Design:

Ant Design 5 uses CSS-in-JS for styling with a powerful ConfigProvider theming API. Theme tokens are configured in src/lib/theme.util.ts.

// src/lib/theme.util.ts
import type { ThemeConfig } from 'antd';

export const themeConfig: ThemeConfig = {
  token: {
    colorPrimary: '#1677ff',
    borderRadius: 6,
    fontFamily: "'Inter', sans-serif",
  },
  components: {
    Button: { controlHeight: 36 },
    Input: { controlHeight: 40 },
    Card: { borderRadius: 8 },
  },
};

Ant Design v5 supports both light and dark modes via the algorithm prop on ConfigProvider, which can be toggled with next-themes.

The template includes @ant-design/icons providing 200+ outlined, filled, and two-tone icons:

import { UserOutlined, SettingOutlined, DeleteOutlined } from '@ant-design/icons';

<Button icon={<UserOutlined />}>Profile</Button>
<Input prefix={<SearchOutlined />} placeholder="Search" />

The antd template generates AntdProvider wrapping the app with ConfigProvider for theming and <App> for message/modal/notification context.

// src/providers/antd.provider.tsx
'use client';
import { ConfigProvider, App } from 'antd';
import { themeConfig } from '@/lib/theme.util';

export function AntdProvider({ children }) {
  return (
    <ConfigProvider theme={themeConfig}>
      <App>
        {children}
      </App>
    </ConfigProvider>
  );
}