개미 디자인 시작하기 — 15분 만에 첫 번째 React UI 구축

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>
  );
}

Enter fullscreen mode Exit fullscreen mode

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} />
    </>
  );
}

Enter fullscreen mode Exit fullscreen mode

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="[email protected]" />
      </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>
  );
}

Enter fullscreen mode Exit fullscreen mode

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>
  );
}

Enter fullscreen mode Exit fullscreen mode

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)