Ant design templates

Ant design templates DEFAULT

Detail Page

Detail Pages display the complete data to users. Users can edit the information or do other operations.

Design Goals#

To increase the information viewing and searching efficiency. To raise the convenience of operation.

Design Principles#


Try to display the information as flat as possible. Do not hide or fold up the content if not necessary.

Clear hierarchy#

In order to decrease the information complexity on each page, put information in levels and groups, following the principle of proximity.


Reduce the use of complex structures, try to use similar layouts and modules to reduce the interference of structural differences to users, and let them focus on information itself.

Typical Templates#

Basic Layouts#

Basic Detail Pages directly show all the information at the same level of hierarchy. We suggest such method of displaying data.

Basic Detail Templates#

Basic layout templates display the main information on one whole card, using non-column split lines to separate the content into groups.

When to use

To display information with less content and low complexity.

Document Detail Templates#

Document Detail Templates display the detailed information of approval documents. They use cards to separate the modules with complex content.

When to use

To display approval process and detailed approval information, as well as some approval operations.

Related operations

Pass, reject, transfer, sign, suspend and withdraw.

Complex Layouts#

Deal with complex details in the following way: Divide information with high complexity and weak correlation into multiple parts. And put the parts into groups according to their relativities, with tabs, steps, cards, etc.

Advanced Detail Templates#

When to use

When the detail page has large and complex content, it has to be split into multiple tabs to guide users to browse information.

Publish Process Templates#

Divide the content into steps, letting users to browse and operate step by step.

When to use

Such templates are suitable for developing and collaborating processes.

Design Suggestions#

How to choose template#

Based on information complexity and correlation model, choose related modes to present the information, and select suitable layouts to display the contents of detail pages.

Separation Methods#

Conclude the closeness of each information module according to the relevance among them. Usually, the more relevant the contents are, the closer they are to each other.

  • Non-column split lines: to separate relevant contents;

  • Full-column split lines: to divide the content into multiple parts;

  • Cards: to display information on one topic;

  • Tabs: to put the information into groups according to some feature, such as version, intention, phase, etc.

Content Components#

Select presentation modes of the information according to its types and complexity. Abased on the complexity from low to high, the followings are available components:

Read more#

Related Global Rules#

Related Modules or Components#



A curated list of Ant Design resources and related projects. The main idea is that everyone can contribute here, so we can have a central repository of informations about Ant Design that we keep up-to-date.


Ant Design, a design language for middleware, is refined by Experience Technology Department of Ant Financial, aims to uniform the user interface specs for middleware projects, reduce the unnecessary cost of design differences and implementation and liberate the resources of design and front-end development.



Official projects and resources of Ant Design.

  • Ant Design - An Enterprise-class UI design language and React-based implementation.
  • Ant Design Pro - An out-of-box UI solution for enterprise applications
  • Ant Design Mobile - Configurable Mobile UI specification and React-based implementation.
  • Ant Design of React - Graceful UI components out of the box, based on React.
  • Ant Design SVG Icons - Project to transform regular icon fonts into SVG format, supporting Ant Design icon fonts.



These are tools and utilities to help build apps using Ant Design,

  • Antd Init - Ant Design boilerplate generator (for demo only, use dva-cli).
  • Dva Cli - Create Ant Design projects based on Dva.js, a lightweight front-end framework based on Redux and React and inspired by Elm and Choo.
  • Antd Tools - Very useful list of tools for Ant Design to create documentation, create new components, build tools and many more.
  • Antd Tools Docs - Documentations for Ant Tools.
  • iConfig Ant Design - Boilerplate for quickly getting a new project up and running with a few useful transforms.
  • vscode-antd-rush - Rush to Ant Design in VS Code
  • Antd Snippets for VS Code
  • Generator Antd Pro - An easy way to build your Ant Design Pro application.
  • formik-antd - Declarative bindings for the popular form state management library Formik.
  • Zaku - JSX-based UI editor, easy way to build page and generate antd code.
  • Antd-Pro-Generator for VS Code Generate Service/Mock/Model from Swagger2.0 or OpenApi3.x docs for Ant Design Pro.


Here are utilities that can help you customize your theme and ability to change it in browser


Related Projects

Ant Design family of projects.

  • Grammar of Graphics - Pure javascript, powerful semantic graph generation tool for big data which provides a set of graphical syntax that lets users build with simple syntax a myriad of charts and integrates a large number of statistical tools, (Read more).
  • Ant Visualization - Professional data visualization specification that aims to put several years of valuable data pattern group work in the process of exploring data visualization to share with all people who need data visualization theory. AntV consists of few parts, data, design specifications and rules for use of the chart, (Read more).
  • Ant Motion - Efficient motion design solutions that complies with Ant Design Visual specification with React implementation.
  • Ant UX - Make a sitemap template for UX design using Omnigraffle, Sketch or Axure. This is a library which assists designers to define, refine and finalize the inter-page logic of their products.


Projects that are built with Angular and Ant Design.


Projects that are built with Vue.js and Ant Design.

  • ant-design-vue - Ant Design of Vue.js 2.5.0+.
  • Vue.js Beauty - Beautiful UI components build with Vue.js and Ant Design.
  • Vue.js Ant UI - Ant Design UI components built in Vue.js.
  • Ant Design Vue - Vue.js version of Ant Design.
  • antue - A set of enterprise-class Vue UI components, following the Ant Design specification completely.
  • vue-antd-admin - Ant Design Pro's implementation with Vue


Projects that are built with Blazor WebAssembly and Ant Design.


A list of UI components built with Ant Design.

  • antd-group-slider - A group of sliders that help input data with multiple ranges & description. Have data sync between sliders to improve UX, avoid accidental missing range during inputing range data.
  • antd-table-infinity - An infinite scroll component based on antd table that supports virtual scrolling & high-performance
  • react-lz-editor - An open source rich react editor based on draft-Js and ant design.
  • React Grid[Deprecated] - Grid React UI Component based on Ant Design.
  • Antd Kit - Advanced Ant Design components.
  • antd-data-table - A component that combines antd's Table and Form to do the search, display, and operating jobs for data.
  • ngx-recursive-form - Angular recursive form based on json input built with Ant Design.
  • antd-amplify-react - A collection of Ant Design component for Aws Amplify for Authentication
  • antd-password-input-strength - AntD Input component with password-strength indicator.

React Hooks

  • Sunflower() Collection of React Hooks returning component of antd.


A list of mature apps built with Ant Design.

  • Eevee - Based on Github page online editing blog platform. The project is based React, Ant Design and GitHub API.
  • Productivity Application - Kanban style, Trello inspired Productivity application built using React, Ant Design and other fantastic modules.


A list of starter projects and boilerplates built with Ant Design.

  • Ant Design Pro - An out-of-box UI solution for enterprise applications
  • Scaffold Market - scaffolds and boilerplates using Ant Design
  • Antd Admin - A admin dashboard application demo built upon Ant Design and Dva.js.
  • Meteor Antd Boilerplate - A basic social network built using Antd and Meteor. Example
  • React SPA - Building SPA with React, Router, ES6, Fetch, Babel, Webpack, Npm, MockJs, FontAwesome, AnimateCSS, Ant Design, LESS and jQuery.
  • React Admin - React Admin UI built on Ant Design (username: admin, password: 123456).
  • React Redux - React Redux for CMS/Enterprise class apps (ERP/Admin) built with Ant Design.
  • React Antd Starter - This project is designed to develop website/web apps using Ant Design and Redux.
  • Webbf - Java demo that uses Maven to build the backend with Spring, Spring MVC and Mybatis. React, Reflux, Eebpack, jQuery, React-bootstrap and Ant Design.
  • React Redux Antd Starter - Front-end boilerplate built with React, Redux and Ant Design.
  • Koa - Example app to build Admin UI built with React, Ant Design and Koa.
  • Star Admin - Demo app built with React, Ant Design, Redux, React-router, Webpack and Babel.
  • React Redux Intro - Demo app built with Ant Design and can be configured to initialize a Redux dependencies.
  • React Start Kit - SPA Boilerplate built with React, Webpack, ES6+, Redux, Router, Babel, Express, Ant Design.
  • CL React - Based on Ant Design front-end framework structures for enterprise back-office software.
  • TODO MVC - Todo list built with React and Ant Design.
  • React Boilerplate - React Admin front-end boilerplate built with Ant Design.
  • Dva Antd Starter - Get started with Dva.js and Ant Design.
  • Dva Antd Mobile Starter - Get started with Dva.js and Ant Design mobile.
  • Dva Ant Admin - A front-end boilerplate built with Dva, Ant-Design
  • Aspnet Core Antd Boilerplate - Server Side Rendering with core.
  • React Redux Universal - Universal/Isomorphic boilerplate using react router 4 and webpack 2.5+. All latest packages.
  • CRA-TS-Antd - Create-React-App + TypeScript + Ant-Design (without Eject).
  • Ng-Alain - Angular Admin UI built on Ant Design (with ng-zorro-antd).
  • Typescript React With Mobx Starter - a starter-template with typescript, react, mobx, antd and webpack).
  • React-PWA, PawJS and AntDesign - A pluggable boilerplate with SEO, PWA, SSR, Skeleton, Placeholders, etc. as some of its many features.
  • Create React App + Ant Design - Use antd in create-react-app without ejecting
  • - Generate fullstack React + Ant Design applications with MongoDB, SQL or Firebase Firestore.
  • The Green Meal - Next.js, PostgreSQL demo app written in TypeScript.

Non-JavaScript Libraries

A list of libraries that are written for non-JavaScript languages.


  • StarCabinet - Github Stars-based cross-platform tool based on React, Electronand and Ant Design.
  • Nowa - A webpack based front-end plug-in scaffolding and development solution.


Design Tools and Resources



Your contributions are always welcome! Click Here to read the guidelines.


Creative Commons License

This work is licensed under a Creative Commons Attribution 4.0 International License.

  1. Motorola used
  2. Double d sausage price
  3. Vintage hunting pants

Ant Design Landing

Landing Pages of Ant Design System


English | 简体中文

What is Landing?

Landing is a template built by Ant Motion's motion components. It has a rich homepage template, downloads the template code package, and can be used quickly. You can also use the editor to quickly build your own dedicated page.

Go Editing



Has a wealth of various page templates to provide downloads.


Diverse modules, you can quickly and flexibly configure the page template you want.

Example in scaffolding

Setup Ant Design - Tutorial to Install Ant Design library / Antd with Create React App


Templates ant design


Design beautiful react apps using ant design - ithinktechnologies


You will also be interested:


850 851 852 853 854