Getting Started with Ant Design — Build Your First React UI in 15 Minutes

XiaoMoDern — Thu, 30 Jul 2026 09:34:33 +0000

What Is Ant Design?

Ant Design (antd) is a React UI library built by Alibaba's Ant Group. It's the most starred React component library on GitHub from China, with over 90k stars — yet surprisingly undercovered in the English-speaking developer community.

If you've used Material UI or Chakra UI, Ant Design is the Chinese equivalent, but with its own design philosophy: consistent, predictable, and packed with enterprise-grade components out of the box.

Fun fact: Alibaba, Tencent, Baidu, and most Chinese tech companies use Ant Design in production. It powers dashboards that serve hundreds of millions of users.

Why Ant Design Over MUI?

Feature	Ant Design	Material UI
Components	60+	50+
Table (Pro)	Built-in sorting, filtering, pagination, row selection	Requires manual wiring
Form validation	Declarative, built-in	Requires react-hook-form or Formik
Tree-shaking	Supported (v5)	Supported
Bundle size (min)	~200KB gzipped	~140KB gzipped
Documentation	Chinese-first, English translations available	English-first
Design system	Ant Design System (custom)	Material Design (Google)

Ant Design wins on out-of-the-box productivity — especially for data-heavy apps like admin panels and dashboards. MUI wins on bundle size and first-party English docs.

Installation

npm install antd @ant-design/icons

No peer dependencies beyond React 16+.

Your First Ant Design Component

import React from "react";
import { Button, Space } from "antd";
import { SearchOutlined, DownloadOutlined } from "@ant-design/icons";

export default function App() {
  return (
    <Space>
      <Button type="primary" icon={<SearchOutlined />}>
        Search
      </Button>
      <Button icon={<DownloadOutlined />}>Download</Button>
      <Button type="dashed">Dashed</Button>
      <Button type="link">Link</Button>
    </Space>
  );
}

That's it. Five button variants with zero CSS.

Building a Data Table in 5 Minutes

import React, { useState, useMemo } from "react";
import { Table, Input } from "antd";

const data = [
  { key: "1", name: "John Doe", role: "Frontend", team: "Web" },
  { key: "2", name: "Jane Smith", role: "Backend", team: "API" },
  { key: "3", name: "Li Wei", role: "DevOps", team: "Infra" },
  { key: "4", name: "Sarah Chen", role: "Frontend", team: "Mobile" },
];

const columns = [
  { title: "Name", dataIndex: "name", sorter: (a, b) => a.name.localeCompare(b.name) },
  {
    title: "Role",
    dataIndex: "role",
    filters: [
      { text: "Frontend", value: "Frontend" },
      { text: "Backend", value: "Backend" },
      { text: "DevOps", value: "DevOps" },
    ],
    onFilter: (value, record) => record.role === value,
  },
  { title: "Team", dataIndex: "team" },
];

const searchStyle = { width: 240, marginBottom: 16 };
const pageConfig = { pageSize: 3 };

export default function TeamTable() {
  const [search, setSearch] = useState("");
  const filtered = useMemo(
    () => data.filter((item) => item.name.toLowerCase().includes(search.toLowerCase())),
    [search]
  );
  return (
    <>
      <Input
        placeholder="Search by name..."
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        style={searchStyle}
      />
      <Table columns={columns} dataSource={filtered} pagination={pageConfig} />
    </>
  );
}

This gives you column sorting, filtering, client-side search, and pagination — in under 50 lines.

Forms That Actually Make Sense

import React from "react";
import { Form, Input, Button, Select, message } from "antd";

const formStyle = { maxWidth: 400 };

export default function SignupForm() {
  const [form] = Form.useForm();
  const onFinish = (values) => {
    console.log("Form values:", values);
    message.success("Signup successful!");
  };
  return (
    <Form form={form} layout="vertical" onFinish={onFinish} style={formStyle}>
      <Form.Item label="Email" name="email" rules={[
          { required: true, message: "Please enter your email" },
          { type: "email", message: "Invalid email format" },
        ]}>
        <Input placeholder="you@example.com" />
      </Form.Item>
      <Form.Item label="Password" name="password" rules={[
          { required: true, message: "Please enter a password" },
          { min: 8, message: "Must be at least 8 characters" },
        ]}>
        <Input.Password />
      </Form.Item>
      <Form.Item label="Role" name="role" rules={[{ required: true, message: "Please select a role" }]}>
        <Select options={[
          { value: "dev", label: "Developer" },
          { value: "designer", label: "Designer" },
          { value: "pm", label: "Product Manager" },
        ]} />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit" block>Create Account</Button>
      </Form.Item>
    </Form>
  );
}

Key advantages: rules array handles all validation declaratively, error messages appear automatically, no useState for form state.

Theming in 3 Lines

import { ConfigProvider, theme, App } from "antd";

const customTheme = {
  algorithm: theme.darkAlgorithm,
  token: {
    colorPrimary: "#00b96b",
    borderRadius: 6,
  },
};

export default function ThemedApp() {
  return (
    <ConfigProvider theme={customTheme}>
      <App />
    </ConfigProvider>
  );
}

The entire antd component tree inherits the theme. No CSS overrides needed.

When to Use Ant Design
Use Ant Design when... Skip it when...
Building admin panels / dashboards Building a marketing landing page
Need tables, forms, data entry out of the box Need a lightweight blog or docs site
You value productivity over bundle size Every KB counts
Ant Design might be China's best-kept secret in the React ecosystem. Now you know.

Originally published at Technical Blog(https://technical-blog-ashen.vercel.app/blog/getting-started-with-ant-design)

DEV Community: XiaoMoDern

Getting Started with Ant Design — Build Your First React UI in 15 Minutes

What Is Ant Design?

Why Ant Design Over MUI?

Installation

Your First Ant Design Component