# 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 the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## 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: How do I customize the v5 theme?**
A: `ConfigProvider`'s `theme` prop accepts `token` (colors/radii/fonts) and `components` (per-component overrides). Changes take effect at runtime — no rebuild required.

**Q: Any bundle-size concerns?**
A: v5 is on-demand by default, and with tree-shaking only the components you use are bundled. Pro Components is a separate package.

**Q: Ant Design or Arco Design — which should I choose?**
A: Ant Design has the biggest ecosystem and most mature i18n; Arco has a more modern design, polished inside ByteDance, and a leaner API. Pick based on team preference.

## Sources & Credits

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

---
Source: https://tokrepo.com/en/workflows/ant-design-enterprise-class-react-ui-library-25e291e1
Author: AI Open Source