ng-zorro-antd

8934

3973

Yadong Xie

Added on December 21, 2024

An enterprise-class Angular UI component library based on Ant Design, all components are open source and free to use under MIT license.

ng-zorro-antd

An enterprise-class Angular UI component library based on Ant Design, all components are open source and free to use under MIT license.

Yadong Xie

README.md

NG-ZORRO

An enterprise-class Angular UI component library based on Ant Design.

CodeFactor

English | 简体中文

✨ Features

  • An enterprise-class UI design system for Angular applications.
  • 60+ high-quality Angular components out of the box.
  • Written in TypeScript with predictable static types.
  • The whole package of development and design resources and tools.
  • Support OnPush mode, high performance.
  • Powerful theme customization in every detail.
  • Internationalization support for dozens of languages.

☀️ License

MIT

FOSSA Status

🖥 Environment Support

Edge
Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
Electron
Electron
last 2 versions last 2 versions last 2 versions last 2 versions last 2 versions last 2 versions

🎨 Design Specification

ng-zorro-antd synchronizes design specification with Ant Design on a regular basis, you can check the log online.

📦 Installation

We recommend using @angular/cli to install. It not only makes development easier, but also allows you to take advantage of the rich ecosystem of angular packages and tooling.

$ ng new PROJECT_NAME
$ cd PROJECT_NAME
$ ng add ng-zorro-antd

More information about @angular/cli here.

You can also install ng-zorro-antd with npm or yarn

$ npm install ng-zorro-antd

🔨 Usage

Import the component modules you want to use into your app.module.ts file and feature modules.

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

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

@angular/cli users won't have to worry about the things below but it's good to know.

And import style and SVG icon assets file link in angular.json.

{
  "assets": [
+   {
+     "glob": "**/*",
+     "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
+     "output": "/assets/"
+   }
  ],
  "styles": [
+   "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
  ]
}

See Getting Started for more details.

⌨️ Development

$ git clone git@github.com:NG-ZORRO/ng-zorro-antd.git
$ cd ng-zorro-antd
$ npm install
$ npm run start

Browser would open automatically.

🤝 Contributing

We welcome all contributions. Please read our CONTRIBUTING.md first. You can submit any ideas as pull requests or as GitHub issues.

If you're new to posting issues, we ask that you read How To Ask Questions The Smart Way (This guide does not provide actual support services for this project!), How to Ask a Question in Open Source Community and How to Report Bugs Effectively prior to posting. Well written bug reports help us help you!

Thanks to JetBrains for supporting us free open source licenses.

JetBrains

❓ Help from the Community

For questions on how to use ng-zorro-antd, please post questions to Stack Overflow using the ng-zorro-antd tag. If you're not finding what you need on stackoverflow, you can find us on as well.

As always, we encourage experienced users to help those who are not familiar with ng-zorro-antd!

🎉 Users

We list some users here, if your company or product uses NG-ZORRO, let us know here!

Love ng-zorro-antd? Give our repo a star ⭐ ⬆.

Related Content

Taiga UI

Taiga UI is an Angular components library and a comprehensive UI kit spanning over 100 components and many helpful directives and utils.
GitHubUpdated today

angular-checklist

angular-checklist
GitHubUpdated 6 months ago

angular-performance-checklist

angular-performance-checklist
GitHubUpdated 19 months ago

xLayers

xLayers is an online app that allows designers and developers to collaborate and generate code from a UI design
GitHubUpdated 24 months ago

ng-plus-wechaty

Conversational AI TensorFlow.js NLP examples with Wechaty SDK and Angular
GitHubUpdated 37 months ago

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.