# Ant Design — Enterprise-Class React UI Library

> Ant Design is an enterprise-class UI design language and React component library created by Alibaba. 60+ production-ready components with comprehensive patterns, internationalization for 30+ languages, and a rich theme system. The go-to choice for admin dashboards.

## Install

Save in your project root:

## Quick Use

```bash
npm i antd
```

```tsx
import { Button, Table, DatePicker, ConfigProvider } from "antd";
import zhCN from "antd/locale/zh_CN";
import "antd/dist/reset.css";

const columns = [
  { title: "Name", dataIndex: "name", key: "name" },
  { title: "Age", dataIndex: "age", key: "age" },
  { title: "Action", key: "action", render: () => <Button type="link">Edit</Button> },
];

const data = [{ key: 1, name: "Alice", age: 32 }];

function App() {
  return (
    <ConfigProvider locale={zhCN}>
      <Table columns={columns} dataSource={data} />
      <DatePicker />
    </ConfigProvider>
  );
}
```

## Intro

Ant Design is an enterprise-class UI design language and React component library, created by Alibaba. It powers thousands of admin dashboards, CRM systems, and enterprise applications worldwide. Offers 60+ production-ready components, a complete design specification, and best-in-class Chinese/English localization.

- **Repo**: https://github.com/ant-design/ant-design
- **Stars**: 97K+
- **Language**: TypeScript
- **License**: MIT

## What Ant Design Does

- **60+ components** — Button, Table, Form, Modal, Drawer, DatePicker, Upload, Tree, Transfer
- **Pro Components** — advanced patterns (ProForm, ProTable, ProList)
- **Design tokens** — seed, map, alias token hierarchy
- **Theming** — customize via ConfigProvider or CSS variables (v5)
- **i18n** — 30+ locales built in
- **Forms** — integrated form engine with validation
- **Tables** — sorting, filtering, pagination, fixed columns, virtual scrolling
- **Charts** — Ant Design Charts companion library

## Architecture

v5 dropped Less for a token-based runtime theming engine (powered by `@ant-design/cssinjs`). This lets you customize themes at runtime without rebuild. Components consume design tokens; ConfigProvider cascades theme, locale, and direction.

## Self-Hosting

Client library.

## Key Features

- 60+ components
- Pro Components (ProForm, ProTable)
- Runtime theming (v5)
- 30+ locales
- TypeScript-first
- SSR support
- Comprehensive form engine
- Accessibility improvements in v5
- Free and open source (MIT)

## Comparison

| Library | Components | Style | Pro Components | Lang |
|---|---|---|---|---|
| Ant Design | 60+ | Runtime CSS-in-JS | Yes | React |
| Material UI | 100+ | Emotion | No | React |
| Mantine | 120+ | CSS files | No | React |
| Chakra UI | 60+ | Emotion | No | React |
| Arco Design | 60+ | Less | Yes | React/Vue |

## 常见问题 FAQ

**Q: v5 主题怎么定制？**
A: `ConfigProvider` 的 `theme` 属性接受 `token`（颜色/圆角/字体）和 `components`（覆盖单组件）。运行时生效无需重 build。

**Q: 包体积问题？**
A: v5 默认按需加载，配合 tree-shaking 只打包用到的组件。Pro Components 是独立包。

**Q: 和 Arco Design 怎么选？**
A: Ant Design 生态最大、国际化完善；Arco 设计更现代、字节内部打磨，API 更精简。看团队偏好。

## 来源与致谢 Sources

- Docs: https://ant.design
- GitHub: https://github.com/ant-design/ant-design
- License: MIT

---
Source: https://tokrepo.com/en/workflows/25e291e1-35b8-11f1-9bc6-00163e2b0d79
Author: AI Open Source