Ant Design

Language: JavaScript

UI Framework

Ant Design was created by Alibaba in 2015 to improve the user experience of enterprise applications. It quickly became one of the most widely used React UI libraries, offering a comprehensive suite of components, a design language, and internationalization support. It is known for its clean design and extensive ecosystem.

Ant Design is a React UI library with a set of high-quality components and design guidelines for building rich, enterprise-level web applications. It emphasizes consistency, usability, and customization.

Installation

npm: npm install antd

yarn: yarn add antd

cdn:

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/antd/5.15.1/reset.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/antd/5.15.1/antd.min.js'></script>

manual: Download Ant Design from the official website or GitHub and include the bundled CSS and JS files.

Usage

Ant Design provides React components following the Ant Design specification. It supports layouts, navigation, forms, tables, modals, notifications, and more.

Button usage

import React from 'react';
import { Button } from 'antd';

export default function App() {
  return <Button type="primary">Primary Button</Button>;
}

Creates a styled primary button using Ant Design’s Button component.

Input field

import { Input } from 'antd';

<Input placeholder="Enter your name" />

Renders a styled input field with a placeholder.

Form with validation

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

const DemoForm = () => {
  const onFinish = values => console.log(values);
  return (
    <Form onFinish={onFinish}>
      <Form.Item name="username" rules={[{ required: true, message: 'Please input your username!' }]}> 
        <Input placeholder="Username" />
      </Form.Item>
      <Button type="primary" htmlType="submit">Submit</Button>
    </Form>
  );
};

Demonstrates a simple form with input validation and a submit handler.

Table with data

import { Table } from 'antd';

const data = [
  { key: 1, name: 'John', age: 32 },
  { key: 2, name: 'Jane', age: 28 }
];

const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' }
];

<Table dataSource={data} columns={columns} />

Creates a table with two columns and sample data.

Error Handling

Styles not applied: Ensure you import Ant Design’s CSS in your project: `import 'antd/dist/reset.css';`

Form validation not working: Check that rules are correctly defined inside `Form.Item` components.

Table not rendering data: Verify that each row object contains a unique `key` property.

Best Practices

Use Ant Design’s layout components (Row, Col, Layout) for consistent responsive design.

Keep forms modular and leverage built-in validation rules.

Use Ant Design’s icons via @ant-design/icons instead of custom SVGs for consistency.

Override styles using the theme configuration instead of raw CSS when possible.

Enable tree-shaking by importing only the required components.

Official Docs Github