ng-zorro-antd

GitHub

Angular UI Component Library based on Ant Design

AI Prompts & Endpoints
Agent Skills View CodeWiki Knowledge Base

Repository: NG-ZORRO/ng-zorro-antd


Stars: 9151

README.md

<p align="center">
<a href="https://ng.ant.design">
<img alt="logo" width="230" src="https://img.alicdn.com/tfs/TB1TFFaHAvoK1RjSZFwXXciCFXa-106-120.svg">
</a>
</p>

<h1 align="center">
NG-ZORRO
</h1>

<div align="center">

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

![Azure branch](https://dev.azure.com/ng-zorro/NG-ZORRO/_build)
![CodeFactor](https://www.codefactor.io/repository/github/ng-zorro/ng-zorro-antd)
![Codecov](https://codecov.io/gh/NG-ZORRO/ng-zorro-antd)
![GitHub Release Date](https://github.com/NG-ZORRO/ng-zorro-antd/releases)
![NPM package](https://npmjs.org/package/ng-zorro-antd)
![NPM downloads](https://npmjs.org/package/ng-zorro-antd)
![GitHub license](https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE)
![Discord](https://discord.com/channels/1433686455925870594/1433686456706138195)
![VSCode Extension](https://marketplace.visualstudio.com/items?itemName=cipchk.ng-zorro-vscode)
![Code style: prettier](https://github.com/prettier/prettier)
![X](http://x.com/ng_zorro)

</div>

![logo](http://ng.ant.design)

English | įŽ€äŊ“中文

✨ Features

- An enterprise-class UI design system for Angular applications.
- 70+ 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 Zoneless and OnPush mode, high performance.
- Powerful theme customization in every detail.
- Internationalization support for dozens of languages.

â˜€ī¸ License

![GitHub license](https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE)
![FOSSA Status](https://app.fossa.com/projects/git%2Bgithub.com%2FNG-ZORRO%2Fng-zorro-antd?ref=badge_shield)

đŸ–Ĩ Environment Support

- Angular ^21.0.0 ![npm package](https://www.npmjs.org/package/ng-zorro-antd)
- Server-side Rendering
- Modern browsers including the following specific versions
- Electron

| <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" /></br>Edge | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" /></br>Firefox | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" /></br>Chrome | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" /></br>Safari | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" /></br>Opera | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" /></br>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.

bash
$ 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

bash
$ npm install ng-zorro-antd

🔨 Usage

Import the component modules you want to use into your component.

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

@Component({
imports: [NzButtonModule]
})
export class AppComponent {}

@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.

diff
{
"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.

- ng-zorro-antd-mobile
- ng-alain
- Snippet extension for VSCode

âŒ¨ī¸ Development

bash
$ git clone [email protected]:NG-ZORRO/ng-zorro-antd.git
$ cd ng-zorro-antd
$ npm install
$ npm run start

Browser would open automatically.

🤝 Contributing

![PRs Welcome](https://github.com/NG-ZORRO/ng-zorro-antd/pulls)

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](https://www.jetbrains.com/?from=ng-zorro-antd)

❓ Help from the Community

For questions on how to use ng-zorro-antd, please post questions to <img alt="Stack Overflow" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" width="140" /> using the ng-zorro-antd tag. If you're not finding what you need on stackoverflow, you can find us on ![Discord](https://discord.com/channels/748677963142135818/764322550712893451) as well.

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

🎉 Users

- Alibaba
- Aliyun
- ThoughtWorks
- China Merchants Bank
- Ververica
- Apache Flink
- Apache Zeppelin
- Apache Submarine
- Apache Metron
- Process Automation Group
- AISINOCO
- GongDao
- UC Express
- Qingflow
- DataGrand
- ScentBird
- Southern Institute of Technology
- Hapify (Dynamic boilerplates tool)

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 :star: :arrow_up:.