Ant Design: what antd gives a React team, and what it costs

The problem antd solves for React teams

Building an internal tool means writing the same table, form, date picker and modal over and over. Ant Design packages that work as a design language plus a component library, and the README describes it as "An enterprise-class UI design language and React UI library." The target reader is a team building web applications where data density and consistent interaction matter more than a distinctive visual identity.

The feature list is explicit about the intended shape of that work: enterprise UI for web applications, a set of React components out of the box, TypeScript with predictable static types, a whole package of design resources and development tools, internationalization for dozens of languages, and theme customization based on CSS-in-JS. Each item maps to a cost you would otherwise pay yourself. Localization is the clearest example. Supporting dozens of languages by hand is months of work that has nothing to do with your product.

It is not aimed at every React project. A landing page with three sections does not need a component library, and the design language is opinionated enough that fighting it costs more than writing your own markup.

How the package is put together

The published artifact is the npm package antd. Its package.json points main at lib/index.js, module at es/index.js, typings at es/index.d.ts, and unpkg at dist/antd.min.js, so the same package serves CommonJS consumers, bundlers that read the module field, TypeScript, and a script tag. The files array ships BUG_VERSIONS.json, dist, es, lib and locale, which tells you the locale data is a first-class part of the tarball rather than an optional add-on.

Styling is runtime rather than a static stylesheet. The README lists "Powerful theme customization based on CSS-in-JS" as a feature, and package.json marks only *.css as side-effectful. That combination is the architectural decision worth understanding: theme values are resolved by JavaScript at render time, so a theme change does not require regenerating a CSS build, but it does mean the styling layer participates in your client bundle and in server-side rendering.

The README also lists server-side rendering and Electron under environment support, alongside modern browsers and the last two versions of Edge, Firefox, Chrome and Safari. Those are the environments the project claims; the README does not state a minimum React version, so check the peer dependency in package.json for your own setup.

Installing antd and rendering a first component

The README gives four package managers. Pick the one your lockfile already uses so you do not introduce a second one.

npm install antd

The alternatives listed are yarn add antd, pnpm add antd and bun add antd. After the install, antd appears in your dependencies and the components are importable by name.

The README's usage example imports two components and renders them. This is the smallest thing you can run to confirm the install worked.

import { Button, DatePicker } from 'antd';

export default () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker placeholder="select date" />
  </>
);

If the button renders with the primary styling and the date picker opens a calendar panel, the package and its style layer are both wired up. A button that renders unstyled usually means the CSS-in-JS runtime is not running in your setup.

If you want to work on antd itself rather than consume it, the README documents cloning the repository, running npm install and npm start, then visiting http://127.0.0.1:8001. It also points at opensumi.run as a free online pure front-end dev environment for the project.

git clone [email protected]:ant-design/ant-design.git
cd ant-design
npm install
npm start

Where antd is the wrong choice

The component set is large and the package is published whole. If your page needs one button and one input, you are paying for a component library to avoid writing twenty lines of CSS. The README's own positioning, enterprise UI for web applications, is the honest signal here: this is a tool for application surfaces, not for a marketing page where the visual design is the product.

Theming is the second constraint. CSS-in-JS means theme values are computed in JavaScript. Teams that have standardized on static CSS extraction, or that need styles to be present before any JavaScript executes, will find this model at odds with their build. The README states theme customization is based on CSS-in-JS; it does not document a static-extraction path, and it does not document a rollback story for theme changes either. Treat the theme as runtime configuration you own.

The release cadence is the third thing to weigh. Versions 6.6.0, 6.6.1 and 6.6.2 were published on 2026-08-10, 2026-08-17 and 2026-08-28 respectively, and the last push to the repository was on 2026-08-28. Patch releases inside a minor line are routine, but a team that pins exact versions and reviews every bump will spend real time on upgrades. The repository ships BUG_VERSIONS.json in the published files, which suggests version-specific bug tracking is part of the project's own process, but the README does not explain how consumers should use that file.

Ant Design compared with Material UI

The most common comparison is with Material UI, and the difference is not cosmetic. Material UI implements Google's Material Design specification. Ant Design implements its own design language, documented in the repository's DESIGN.md and on the project site. Choosing between them is choosing which specification your product will follow, and that choice is hard to reverse because it touches every screen.

The practical differences follow from that. Ant Design's README states theme customization is based on CSS-in-JS, so its theming model is a runtime one. Its locale data ships inside the package under locale, which matters if you need dozens of languages without assembling them yourself. The wider Ant Design family is also a factor: the README links Ant Design Pro, Pro Components, Ant Design Mobile, Ant Design Mini, Ant Design Charts, Ant Design Web3 and Ant Design X, so a team already using those has a reason to stay inside the same design language.

Neither library is a drop-in replacement for the other. Swapping them means rewriting component usage and redoing your theme tokens, and any custom styling layered on top will not survive the move intact.

Licence, maintenance and upgrade cost

antd is MIT licensed, stated in both the README badge block and the package.json license field. MIT permits commercial use, modification and redistribution provided the copyright notice and permission notice are retained. That is a permissive arrangement, but it is not legal advice: if your organization has a policy on third-party licences, run the package through your own review rather than treating this paragraph as clearance.

Maintenance is visible in the release history. Three releases landed in August 2026, the most recent on 2026-08-28, and the repository is not archived. That is a fast-moving project, and the upgrade cost sits with you: each patch release is a version bump to review, and the changelog files in the repository (CHANGELOG.en-US.md and CHANGELOG.zh-CN.md) are where the project records what changed. The README links a versioning release note on the repository wiki, which is the place to check before planning a major upgrade.

There is a second cost that is easy to miss. Because theming runs through CSS-in-JS, a major version that changes the theming internals can touch every customized component in your application, not just the ones you upgraded deliberately. Budget for that when a major version arrives, not after.

Editorial conclusion

Adopt antd when you are building a data-dense React application and want typed components, dozens of locales and a theme layer you can change without forking. Do not adopt it for a small marketing site or a bundle-size-sensitive page where a handful of hand-written components would do. Before committing, verify three things against your own stack: that your React version satisfies the peer range in package.json, that your bundler handles the CSS-in-JS runtime that theme customization depends on, and that your team accepts the cadence implied by 6.6.0, 6.6.1 and 6.6.2 landing inside one month.

Frequently asked questions

Official sources

1. Official documentation
2. Official README
3. Project repository
4. Release notes