Ant Design

一套企业级的 UI 设计语言和 React 实现。(An enterprise-class UI design language and React-based implementation.)

Github stars Tracking Chart

在中台产品的研发过程中,会出现不同的设计规范和实现方式,但其中往往存在很多类似的页面和组件,给设计师和工程师带来很多困扰和重复建设,大大降低了产品的研发效率。蚂蚁金服体验技术部经过大量的项目实践和总结,沉淀出一个中台设计语言 Ant Design。旨在统一中台项目的前端 UI 设计,屏蔽不必要的设计差异和实现成本,解放设计和前端的研发资源。
Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界,将进行 UE 设计和 UI 设计人员统称为『设计者』,利用统一的规范进行设计赋能,全面提高中台产品体验和研发效率。

特性

  • 提炼自企业级中后台产品的交互语言和视觉风格。
  • 开箱即用的高质量 React 组件。
  • 使用 TypeScript 构建,提供完整的类型定义文件。
  • 基于 npm + webpack + dva 的企业级开发框架。
支持环境
  • 现代浏览器和 IE9 及以上。
  • 支持服务端渲染。
  • Electron

Overview

Name With Ownerant-design/ant-design
Primary LanguageTypeScript
Program languageHTML (Language Count: 5)
Platform
License:MIT License
Release Count700
Last Release Name5.16.5 (Posted on )
First Release Name0.7.0 (Posted on )
Created At2015-04-24 15:37:24
Pushed At2024-04-28 15:55:42
Last Commit At2024-04-28 15:22:23
Stargazers Count90.2k
Watchers Count228
Fork Count46k
Commits Count27.7k
Has Issues Enabled
Issues Count29165
Issue Open Count1019
Pull Requests Count13487
Pull Requests Open Count87
Pull Requests Close Count3460
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private

An enterprise-class UI design language and React UI library.

CircleCI branch CI Status Codecov NPM downloads

Dependencies DevDependencies Total alerts FOSSA Status Issues need help

Gitter Join the chat at https://gitter.im/ant-design/ant-design

English, Português, 简体中文

✨ Features

  • ? Enterprise-class UI designed for web applications.
  • ? A set of high-quality React components out of the box.
  • ? Written in TypeScript with predictable static types.
  • ⚙️ Whole package of design resources and development tools.
  • ? Internationalization support for dozens of languages.
  • ? Powerful theme customization in every detail.

? Environment Support

  • Modern browsers and Internet Explorer 9+ (with polyfills)
  • Server-side Rendering
  • Electron, IE / Edge, Firefox, Chrome, Safari, Opera, Electron, ---, ---, ---, ---, ---, ---, IE11, Edge, last 2 versions, last 2 versions, last 2 versions, last 2 versions, last 2 versions, ## ? Install
npm install antd
yarn add antd

? Usage

import { Button, DatePicker } from 'antd';

const App = () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker />
  </>
);

And import style manually:

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

Or use babel-plugin-import.

TypeScript

See Use in TypeScript.

? Internationalization

See i18n.

⌨️ Development

Use Gitpod, a free online dev environment for GitHub.

Open in Gitpod

Or clone locally:

$ git clone git@github.com:ant-design/ant-design.git
$ cd ant-design
$ npm install
$ npm start

Open your browser and visit http://127.0.0.1:8001 , see more at Development.

? Contributing PRs Welcome

Read our contributing guide and let's build a better antd together.

We welcome all contributions. Please read our CONTRIBUTING.md first. You can submit any ideas as pull requests or as GitHub issues. If you'd like to improve code, check out the Development Instructions and have a good time! :)

If you are a collaborator, please follow our Pull Request principle to create a Pull Request by collaborator template.

Let's fund issues in this repository

❤️ Sponsors and Backers

To the top