Ant Design (antd) для React — установка и компоненты

Ant Design, или antd, — большая UI-библиотека для React с готовыми кнопками, формами, таблицами, модальными окнами, уведомлениями и системой темизации. Её часто выбирают для админок, CRM и внутренних сервисов.

Установка

npm install antd

Базовые компоненты Ant Design

Ниже — минимальный набор, с которого обычно начинается рабочий интерфейс на Ant Design: кнопка, форма и таблица. Эти компоненты встречаются почти в каждой админке, поэтому их полезно разобрать до настройки темы и сложных сценариев.

Смысл не в том, чтобы выучить все компоненты библиотеки сразу. Достаточно увидеть общий паттерн: импорт компонента, props для поведения, состояние в React и готовая визуальная оболочка от Ant Design.

Первый компонент

import { Button, DatePicker, message } from 'antd';

function App() {
  const [api, contextHolder] = message.useMessage();

  return (
    <main style={{ padding: 24 }}>
      {contextHolder}
      <DatePicker onChange={(date) => api.info(String(date))} />
      <Button type="primary" style={{ marginLeft: 12 }}>
        Сохранить
      </Button>
    </main>
  );
}

Когда выбирать Ant Design

• Нужны таблицы, фильтры, формы и модалки из коробки.
• Проект похож на админ-панель или личный кабинет.
• Важнее скорость сборки интерфейса, чем уникальный визуальный стиль.
• Команда готова принять внешний вид Ant Design как основу.

Форма с валидацией

import { Button, Form, Input } from 'antd';

function LoginForm() {
  function onFinish(values) {
    console.log(values);
  }

  return (
    <Form layout="vertical" onFinish={onFinish}>
      <Form.Item
        label="Email"
        name="email"
        rules={[{ required: true, message: 'Введите email' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Пароль"
        name="password"
        rules={[{ required: true, message: 'Введите пароль' }]}
      >
        <Input.Password />
      </Form.Item>

      <Button type="primary" htmlType="submit">Войти</Button>
    </Form>
  );
}

Таблица

import { Table } from 'antd';

const columns = [
  { title: 'Имя', dataIndex: 'name' },
  { title: 'Email', dataIndex: 'email' },
];

const data = [
  { key: 1, name: 'Алиса', email: 'alice@example.com' },
  { key: 2, name: 'Боб', email: 'bob@example.com' },
];

function UsersTable() {
  return <Table columns={columns} dataSource={data} />;
}

Минусы, о которых нужно знать

Ant Design может быть избыточен для маленького лендинга или простого виджета. У библиотеки узнаваемый стиль, поэтому для уникального брендинга понадобится настройка темы. Также важно импортировать только нужные компоненты и следить за размером bundle.

Мини-проект: таблица пользователей с модальным окном

Самый частый сценарий для Ant Design — админская таблица и форма в модальном окне. Ниже каркас, который можно расширить запросом к API.

import { Button, Modal, Table } from 'antd';
import { useState } from 'react';

function UsersAdmin() {
  const [open, setOpen] = useState(false);

  const columns = [
    { title: 'Имя', dataIndex: 'name' },
    { title: 'Роль', dataIndex: 'role' },
  ];

  const data = [
    { key: 1, name: 'Алиса', role: 'Редактор' },
    { key: 2, name: 'Боб', role: 'Администратор' },
  ];

  return (
    <>
      <Button type="primary" onClick={() => setOpen(true)}>
        Добавить пользователя
      </Button>
      <Table columns={columns} dataSource={data} />
      <Modal open={open} onCancel={() => setOpen(false)} title="Новый пользователь">
        Здесь будет форма
      </Modal>
    </>
  );
}

Когда Ant Design будет удачным выбором

Ant Design стоит брать не потому, что у него много компонентов, а когда проект похож на рабочий интерфейс: админка, CRM, личный кабинет, таблицы, фильтры, формы, статусы, модальные окна. В таких задачах библиотека экономит дни на базовой механике.

Если проект состоит из рабочих экранов, а не из маркетинговых страниц, Ant Design обычно окупается быстро. Особенно это заметно на формах, таблицах и сценариях, где нужны единые правила отображения ошибок, состояний загрузки и пустых данных.

Что обычно хотят найти по запросу antd

Человек, который ищет antd, чаще всего хочет быстро понять: как установить библиотеку, как подключить Button, Form и Table, и стоит ли брать её для админки. Поэтому в статье важен короткий путь к рабочему экрану, а не общие слова о дизайне.

Хорошие признаки

• нужны таблицы с сортировкой, пагинацией и фильтрами;
• в проекте много форм и модальных окон;
• дизайн не обязан быть уникальным до пикселя;
• важнее быстро собрать понятный рабочий экран, чем писать свою дизайн-систему.

Когда лучше притормозить

Для лендинга, небольшого виджета или продукта с сильным кастомным визуальным стилем Ant Design может оказаться тяжеловат. В таком случае сначала оцените MUI, Chakra UI, Tailwind CSS или собственные компоненты.

Практические советы

• не начинайте с глобальной кастомизации темы: сначала соберите рабочий интерфейс;
• для больших таблиц продумайте пагинацию и загрузку данных с сервера;
• используйте Form.Item rules, чтобы ошибки были рядом с полями;
• не смешивайте много UI-библиотек в одном проекте без причины.

Что сделать после установки

Соберите один реальный экран: таблицу пользователей, форму добавления и модальное подтверждение. Если этот экран получается быстрее и чище, чем на самописных компонентах, Ant Design для вашего проекта подходит.