logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.11.5
  • Ant Design
    • Introduction
    • Design Values
    • Cases
  • Global Styles
    • Colors
    • Layout
    • Font
    • Icons
    • Dark Mode
    • Shadow
  • Design Patterns
    • Overview
    • Global Rules
      • Feedback
      • Navigation
      • Data Entry
      • Data Display
      • Copywriting
      • Data format
      • Button
      • Data List
    • Principles
      • Proximity
      • Alignment
      • Contrast
      • Repetition
      • Make it Direct
      • Stay on the Page
      • Keep it Lightweight
      • Provide an Invitation
      • Use Transition
      • React Immediately
    • Template Document
      • Visualization Page
      • Detail Page
  • Design Patterns (Research)
    • Overview
    • Template Document
      • Form Page
      • Workbench
      • List Page
      • Result Page
      • Exception Page
    • Global Rules
      • Navigation
      • Message and Feedback
      • Empty Status
  • Visualization
  • Motion
  • Illustrations
Guidelines and Resources
Front-end Implementation
Who's using Ant Design
Words From Community
How to Contribute

Introduction

    • Design Values

    Resources

    Ant Design Charts
    Ant Design Pro
    Ant Design Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    ahooks-React Hooks Library
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Ant Design
    Medium
    Twitter
    yuqueAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconfSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTechMore Products

    yuqueYuQue-Document Collaboration Platform
    AntVAntV-Data Visualization
    EggEgg-Enterprise Node.js Framework
    kitchenKitchen-Sketch Toolkit
    GalaceanGalacean-Interactive Graphics Solution
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    Ant Financial has a large number of enterprise-level products. With complex scenarios, designers and developers often need to respond fast due to frequent changes in product demands and concurrent R & D workflow. Many similar contents exist in the process. Through abstraction, we could obtain some stable and highly reusable components and pages.

    On the other hand, with the trend of commercialization, more and more enterprise products begin to pursue better user experiences. Under this situation, Ant User-Experience Design Team builds a design system for enterprise products based on four design values of Natural, Certain, Meaningful, and Growing. It aims to uniform the user interface specs and reduce redundancies and excessive production costs, helping product designers to focus on better user experience.

    Guidelines and Resources

    We provide comprehensive design guidelines, best practices, resources, and tools to help designers produce high-quality product prototypes.

    • Design values
    • Design patterns
    • Visualization
    • Illustrations
    • Design resources
    • Sketch toolbox
    • Articles

    Front-end Implementation

    React is used to encapsulate a library of components which embody our design language. We welcome the community to implement our design system in other front-end frameworks of their choice.

    • Ant Design of React（official implementation）
    • NG-ZORRO - Ant Design of Angular
    • NG-ZORRO-MOBILE - Ant Design Mobile of Angular
    • Ant Design of Vue
    • Ant Design Blazor
    • San UI Toolkit for Ant Design
    • antizer (ClojureScript)

    Who's using Ant Design

    • Ant Financial
    • Alibaba
    • Tencent
    • Baidu
    • Koubei
    • Meituan
    • Didi
    • Eleme
    • Other Users

    If your company or products use Ant Design, and you'd like to be added to this growing list, click here to leave us a message.

    Words From Community

    • Hacknews: Show HN: Antd – A set of high-quality React components
    • Alligator: Crafting Beautiful UIs in React Using Ant Design
    • Introduction to Ant Design
    • Build a React App with Ant Design Principles

    How to Contribute

    Contributions to Ant Design on GitHub are welcomed! Whether you have questions, concerns, or suggestions for improving Ant Design - please don't hesitate to reach out to us here.