Skip to content
Learni
View all tutorials
Frontend

How to Integrate Ant Design in a React Application in 2026

18 minINTERMEDIATE
ReactAnt DesignUI Components
Lire en français

Introduction

Ant Design is the most widely used UI component library in the React ecosystem for enterprise applications. In 2026, it remains essential thanks to its consistent design system, accessible components, and advanced customization tools. This intermediate tutorial walks you through integrating Ant Design into an existing React application, setting up the theme, and using complex components like forms and tables. You will learn how to avoid common pitfalls and adopt best practices for project structure.

Prerequisites

  • React 18+ and TypeScript
  • Node.js 20+
  • Basic knowledge of React and hooks
  • Create React App or Vite project already initialized

Installing Dependencies

terminal
npm install antd @ant-design/icons
npm install -D @types/react

This command installs Ant Design and its official icons. Type definitions are already included in recent versions of Ant Design, but we ensure TypeScript compatibility.

Configuring the Provider

src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { ConfigProvider } from 'antd';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#1677ff',
          borderRadius: 6,
        },
      }}
    >
      <App />
    </ConfigProvider>
  </React.StrictMode>
);

ConfigProvider allows you to define a global theme from the root. This centralizes colors and border radius for the entire application.

Using a Simple Button

src/components/ActionButton.tsx
import React from 'react';
import { Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';

interface Props {
  onClick: () => void;
}

export const ActionButton: React.FC<Props> = ({ onClick }) => {
  return (
    <Button type="primary" icon={<PlusOutlined />} onClick={onClick}>
      Ajouter un élément
    </Button>
  );
};

This reusable component demonstrates importing icons and using Ant Design style props. The primary type automatically applies the color defined in the theme.

Creating a Complete Form

src/components/UserForm.tsx
import React from 'react';
import { Form, Input, Button, message } from 'antd';

const UserForm = () => {
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    message.success('Utilisateur créé avec succès');
    form.resetFields();
  };

  return (
    <Form form={form} layout="vertical" onFinish={onFinish}>
      <Form.Item name="name" label="Nom" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item name="email" label="Email" rules={[{ required: true, type: 'email' }]}>
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">Enregistrer</Button>
      </Form.Item>
    </Form>
  );
};

export default UserForm;

The useForm hook manages validation and submission. Validation rules are declarative and Ant Design automatically displays error messages.

Advanced Data Table

src/components/DataTable.tsx
import React from 'react';
import { Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';

interface DataType {
  key: string;
  name: string;
  status: string;
}

const columns: ColumnsType<DataType> = [
  { title: 'Nom', dataIndex: 'name', key: 'name' },
  { 
    title: 'Statut', 
    dataIndex: 'status', 
    key: 'status',
    render: (status) => <Tag color={status === 'Actif' ? 'green' : 'red'}>{status}</Tag> 
  }
];

const data: DataType[] = [
  { key: '1', name: 'Alice', status: 'Actif' },
  { key: '2', name: 'Bob', status: 'Inactif' }
];

export const DataTable = () => <Table columns={columns} dataSource={data} />;

Columns typed with ColumnsType provide excellent autocomplete support. Custom render functions allow displaying colored Tags based on values.

Best Practices

  • Always wrap your application with ConfigProvider to centralize the theme
  • Use form hooks (useForm) instead of manual state management
  • Import only the components you need to optimize bundle size
  • Define strict TypeScript types for table data
  • Prefer notification messages over native alerts

Common Errors to Avoid

  • Forgetting to import the Ant Design CSS file (antd/dist/reset.css)
  • Modifying CSS classes directly instead of using theme tokens
  • Not handling loading states in large tables
  • Using Ant Design versions incompatible with React 19

Going Further

Discover our advanced courses on building modern interfaces with Learni Group.