base on πŸ‘¨πŸ»β€πŸ’»πŸ‘©πŸ»β€πŸ’» Use Ant Design like a Pro! Language: πŸ‡ΊπŸ‡Έ | [πŸ‡¨πŸ‡³](./README.zh-CN.md) | [πŸ‡·πŸ‡Ί](./README.ru-RU.md) | [πŸ‡ΉπŸ‡·](./README.tr-TR.md) | [πŸ‡―πŸ‡΅](./README.ja-JP.md) | [πŸ‡«πŸ‡·](./README.fr-FR.md) | [πŸ‡΅πŸ‡Ή](./README.pt-BR.md) | [πŸ‡ΈπŸ‡¦](./README.ar-DZ.md) | [πŸ‡ͺπŸ‡Έ](./README.es-ES.md) <h1 align="center">Ant Design Pro</h1> <div align="center"> An out-of-box UI solution for enterprise applications as a React boilerplate. [![CI](https://github.com/ant-design/ant-design-pro/actions/workflows/ci.yml/badge.svg)](https://github.com/ant-design/ant-design-pro/actions/workflows/ci.yml) [![Preview Deploy](https://github.com/ant-design/ant-design-pro/actions/workflows/preview-deploy.yml/badge.svg)](https://github.com/ant-design/ant-design-pro/actions/workflows/preview-deploy.yml) [![Build With Umi](https://img.shields.io/badge/build%20with-umi-028fe4.svg?style=flat-square)](http://umijs.org/) [![Checked with Biome](https://img.shields.io/badge/Checked_with-Biome-60a5fa?style=flat&logo=biome)](https://biomejs.dev) [![](https://badgen.net/badge/icon/Ant%20Design?icon=https://gw.alipayobjects.com/zos/antfincdn/Pp4WPgVDB3/KDpgvguMpGfqaHPjicRK.svg&label)](https://ant.design/) <img width="1718" height="1191" alt="light theme preview" src="https://github.com/user-attachments/assets/74ad0b4a-e086-4955-8edd-9f2cff31aee8" /> <img width="1718" height="1191" alt="dark theme preview" src="https://github.com/user-attachments/assets/d4bcb7c1-42c7-4c0f-b130-1193a931f9f7" /> </div> - Preview: http://preview.pro.ant.design - Home Page: http://pro.ant.design - Documentation: http://pro.ant.design/docs/getting-started - ChangeLog: http://pro.ant.design/docs/changelog - FAQ: http://pro.ant.design/docs/faq ## Features - :bulb: **TypeScript**: A language for application-scale JavaScript - :scroll: **Blocks**: Build page with block template - :gem: **Neat Design**: Follow [Ant Design specification](http://ant.design/) - :triangular_ruler: **Common Templates**: Typical templates for enterprise applications - :rocket: **State of The Art Development**: Newest development stack of React/umi/dva/antd - :iphone: **Responsive**: Designed for variable screen sizes - :art: **Theming**: Customizable theme with simple config - :globe_with_meridians: **International**: Built-in i18n solution - :gear: **Best Practices**: Solid workflow to make your code healthy - :1234: **Mock development**: Easy to use mock development solution - :white_check_mark: **UI Test**: Fly safely with unit and e2e tests ## Templates ``` - Dashboard - Analytic - Monitor - Workspace - Form - Basic Form - Step Form - Advanced From - List - Standard Table - Standard List - Card List - Search List (Project/Applications/Article) - Profile - Simple Profile - Advanced Profile - Account - Account Center - Account Settings - Result - Success - Failed - Exception - 403 - 404 - 500 - User - Login - Register - Register Result ``` ## Usage ### Use bash We provide pro-cli to quickly initialize scaffolding. ```bash # use npm npm i @ant-design/pro-cli -g pro create myapp ``` Choose the pro template. Simple is the basic template, which only provides the basic content of the framework operation. Complete contains all blocks, which is not suitable for secondary development as a basic template. ```shell ? πŸš€ Full or a simple scaffold? (Use arrow keys) ❯ simple complete ``` Initialized Git repository: ```shell $ git init myapp ``` Install dependencies: ```shell $ cd myapp && tyarn // or $ cd myapp && npm install ``` ## Browsers support Modern browsers. | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | | --- | --- | --- | --- | --- | | Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | ## Contributing Any type of contribution is welcome, here are some examples of how you may contribute to this project: - Use Ant Design Pro in your daily work. - Submit [issues](http://github.com/ant-design/ant-design-pro/issues) to report bugs or ask questions. - Propose [pull requests](http://github.com/ant-design/ant-design-pro/pulls) to improve our code. <a href="https://openomy.app/github/ant-design/ant-design-pro" target="_blank" style="display: block; width: 100%;" align="center"> <img src="https://openomy.app/svg?repo=ant-design/ant-design-pro&chart=bubble&latestMonth=3" target="_blank" alt="Contribution Leaderboard" style="display: block; width: 100%;" /> </a> ", Assign "at most 3 tags" to the expected json: {"id":"3310","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"