标签：#antd

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