Skip to content

Ant Design

UI & GraphicsUI FrameworkJavaScript
Official docs ↗GitHub ↗

What it is

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.

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

Installation

npm install antd

Getting started

The smallest useful thing you can do with it, and what each part means.

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.

Advanced usage

Where the library earns its place over a simpler alternative.

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.

Errors and fixes

The failures you are most likely to hit, and what actually resolves them.

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.

Background

Why it exists, and what it was reacting to.

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.

Related libraries

Others in UI & Graphics for JavaScript.

← All JavaScript librariesJavaScript guide