ng-zorro-antd

Enterprise-grade UI component library for Angular based on Ant Design — 60+ production-ready components with a polished design system.

ng-zorro-antd

Angular

Enterprise-grade UI component library for Angular based on Ant Design — 60+ production-ready components with a polished design system.

npm GitHub Docs

Fit

Bundle (gzip)

156 B

188 B raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Building enterprise-grade dashboards and admin panels requires a comprehensive component set — data tables, tree selectors, cascading menus, and form components — that most Angular UI libraries don't fully cover.

What It Does

NG-ZORRO implements all Ant Design components for Angular, including complex ones like nz-tree-select, nz-transfer, nz-timeline, and nz-cascader. It supports both standalone components and module imports, custom theming via Less variables, and RTL layouts.

Installation

bash

ng add ng-zorro-antd

Usage Example

typescript

import { NzTableModule } from 'ng-zorro-antd/table';
import { NzButtonModule } from 'ng-zorro-antd/button';

@NgModule({ imports: [NzTableModule, NzButtonModule] })
export class AppModule {}

html

<nz-table [nzData]="users" nzBordered>
  <thead>
    <tr><th>Name</th><th>Email</th></tr>
  </thead>
  <tbody>
    <tr *ngFor="let user of users">
      <td>{{ user.name }}</td>
      <td>{{ user.email }}</td>
    </tr>
  </tbody>
</nz-table>

Related packages

@angular/cdkAngular

Angular Component Dev Kit — a set of behavior primitives for building accessible, high-quality UI components without prescribing any visual style.

@angular/materialAngular

Official Material Design component library for Angular — 30+ accessible, themeable UI components built for Angular's ecosystem.

@ng-bootstrap/ng-bootstrapAngular

Angular widgets built from scratch using Bootstrap CSS — no jQuery, no Popper.js, just pure Angular components.

@ngneat/until-destroyAngular

Automatic RxJS subscription cleanup for Angular components — no more manual unsubscribe logic in ngOnDestroy.

@ngrx/storeAngular

Reactive state management for Angular apps built on RxJS — a predictable, unidirectional data flow inspired by Redux.