NG-ZORRO: the Ant Design component library for Angular 22

The gap NG-ZORRO fills between Ant Design and Angular

Ant Design began as a React design system, and its component behaviour (table filtering, form validation layout, modal stacking) is documented as a React implementation. Teams building Angular applications could not use that implementation directly. NG-ZORRO is the Angular counterpart: the README describes it as "An enterprise-class Angular UI component library based on Ant Design," and the package name on npm is ng-zorro-antd. The audience is narrow and specific. It is for Angular teams building internal tools, admin consoles and data-heavy dashboards where the visual language has already been decided by designers familiar with Ant Design. It is not a general-purpose widget kit, and the README does not present it as one. The library is written in TypeScript with what the README calls "predictable static types," which matters more here than in a plain CSS framework: component inputs and outputs are typed, so a template that passes the wrong shape to a table column definition fails at build time rather than at runtime.

How the package is structured and what it depends on

The repository is an Nx workspace, not a single library folder. The root package.json declares the published name as ng-zorro-antd with a placeholder version ("0.0.0-NOT-USED"), which means the version that reaches npm is stamped by the release script rather than by the root manifest. The real component source lives under components/, with docs/, schematics/ and scripts/ alongside it. Three runtime dependencies are declared: @angular/cdk, @ant-design/icons-angular and date-fns. That dependency list is the clearest statement of the design philosophy. NG-ZORRO does not reimplement overlays, focus trapping or virtual scrolling; it builds on the Angular CDK, which means the behaviour you get for positioning and accessibility follows CDK conventions. Icons come from a separate Angular-specific package rather than from the React icon set, so icon imports are their own concern. Date handling goes through date-fns rather than Angular's own date pipe or Moment, which is a deliberate choice given Moment's deprecation status elsewhere in the ecosystem. The build, test, lint and release tasks are all wired through Nx targets in project.json and angular.json, so anyone contributing upstream has to learn the workspace layout, not just the component API.

Installing ng-zorro-antd and rendering a first component

The README points to the documentation site at ng.ant.design for setup instructions; the repository itself does not inline an install walkthrough. What the repository does confirm is the package name and the peer environment. The README lists Angular ^22.0.0 as the supported framework version, and the root package.json sets an engines field of node ^22.22.3 || ^24.15.0 || >=26.0.0. Check both before you start, because a mismatch there produces confusing build errors rather than a clear message.

node --version
npm install ng-zorro-antd

After the install, the package appears in your dependencies alongside its three runtime peers. The library also ships schematics, which is why the repository contains a schematics/ directory and why the root scripts include build:schematics and test:schematics. A schematic is the usual way Angular projects add a library's styles and module imports without hand-editing configuration. The documentation site is the authoritative source for the exact schematic name and the flags it accepts; the README does not reproduce them, so do not guess a command from the package name alone.

npm test

The root test script runs the library suite through Nx with coverage enabled and watch mode disabled. That is the same target upstream contributors run, and it is a reasonable smoke test if you fork the repository to patch a component.

Zoneless and OnPush support, and what it costs you

The README lists "Support Zoneless and OnPush mode, high performance" as a feature, and that claim is worth reading carefully rather than accepting at face value. Angular's zone-less mode removes zone.js from the change detection path, which means components must signal their own updates through signals or explicit marking. A component library that supports zone-less operation has to be written so that internal state changes trigger detection without relying on the global zone. NG-ZORRO states that it does this. The practical consequence is that you cannot mix strategies carelessly: if you enable zone-less bootstrapping and then rely on a component whose internals assume zone.js, updates will silently fail to render. The README does not enumerate which of the 70+ components are verified under zone-less mode, so the safe path is to test the specific components your application depends on before committing to that configuration. This is a genuine limitation of the documentation, not of the library, and it is the kind of thing you discover in a staging environment rather than in a README.

Theming, i18n and the Tailwind question

The README claims "Powerful theme customization in every detail" and "Internationalization support for dozens of languages." Both are broad statements, and the documentation site is where the actual token names and locale identifiers live; the README gives neither. A common question people arrive with is how NG-ZORRO behaves alongside Tailwind. Nothing in the repository addresses that combination, so the honest answer is that the repository does not document an integration path. The mechanism that would matter is specificity: NG-ZORRO components carry their own class names and styles, and Tailwind's preflight layer resets base elements. Whether those two collide depends on load order and on which utility classes you apply to component host elements, and you will have to determine that empirically in your own build. The same caution applies to theming. The library exposes customization, but if your design system diverges far from Ant Design's defaults, you are fighting the component styles rather than configuring them, and at that point a headless or unstyled primitive library is the better foundation.

Angular Material versus NG-ZORRO: two different starting points

The most direct alternative is Angular Material, which is maintained by the Angular team and follows Google's Material Design specification rather than Ant Design. The difference is not cosmetic. Angular Material is built on the same Angular CDK that NG-ZORRO depends on, so the low-level primitives (overlay, portal, a11y) are shared, but the visual specification and the component API surface differ. If your designers hand you Material specs, Angular Material is the shorter path; if they hand you Ant Design specs, NG-ZORRO is. A second difference is release cadence relative to Angular itself: Angular Material tracks Angular releases as part of the same organisation, while NG-ZORRO is a community project that publishes its own version line. The repository's recent releases show 22.0.0 on 2026-07-21, 22.0.1 on 2026-08-07 and 22.1.0 on 2026-09-17, with the last push to master on 2026-09-21. That is a maintained project, but the version alignment with Angular's major is something you should confirm against your own Angular version rather than assume.

License, upgrade cost and what MIT actually means here

The repository is MIT licensed, and the root package.json declares "license": "MIT". MIT permits commercial use, modification and redistribution provided the copyright notice and permission notice are retained. It does not impose copyleft obligations on your application, and it does not grant trademark rights to the NG-ZORRO or Ant Design names. That is a description of the license text, not legal advice; if your organisation has a policy on third-party attribution, run the LICENSE file past whoever owns that policy. The upgrade cost is where the real budget goes. The README pins the supported Angular version at ^22.0.0, and Angular majors ship breaking changes on a regular schedule. Each time you move your Angular version, you are also moving NG-ZORRO, and the library's own major versions track that. The CHANGELOG.md at the repository root and the conventional-changelog script in package.json indicate that changes are generated from conventional commits, so the changelog is the place to read before bumping. Because the library depends on @angular/cdk and @ant-design/icons-angular at matching major versions, a partial upgrade (new NG-ZORRO, old CDK) is a configuration the repository does not describe as supported.

Editorial conclusion

Adopt NG-ZORRO if your application is on Angular ^22.0.0, your designers already work in the Ant Design system, and you want table, form and modal behaviour that matches that system out of the box. Do not adopt it as a general-purpose widget kit for a non-Angular stack, and do not adopt it if your team is pinned to Angular 19 or below, since the README lists Angular ^22.0.0 as the supported peer. Before committing, verify three things: that your installed Angular version satisfies ^22.0.0, that your Node runtime matches the engines field (^22.22.3 || ^24.15.0 || >=26.0.0), and that a zone-less or OnPush rendering mode works with the components you actually plan to use.

Frequently asked questions

Official sources

1. License: MIT
2. NG-ZORRO/ng-zorro-antd on GitHub
3. Project website
4. README
5. Releases