antd

What is antd?

The antd npm package is a UI design language and React UI library that provides a lot of out-of-the-box components and tools to help developers build user interfaces efficiently. It is widely used for enterprise-level applications and admin UIs due to its comprehensive set of components and professional look.

What are antd's main functionalities?

Layout

Provides a set of components to create a layout structure for your application, including headers, footers, sidebars, and content areas.

import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;

ReactDOM.render(
  <Layout>
    <Header>Header</Header>
    <Layout>
      <Sider>Sider</Sider>
      <Content>Content</Content>
    </Layout>
    <Footer>Footer</Footer>
  </Layout>,
  document.getElementById('container')
);

Data Display

Includes components like tables, lists, and cards to display data in a structured format.

import { Table } from 'antd';

const dataSource = [
  { key: '1', name: 'John Doe', age: 32, address: 'Some Street' },
  { key: '2', name: 'Jane Doe', age: 42, address: 'Another Street' }
];

const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  { title: 'Address', dataIndex: 'address', key: 'address' }
];

ReactDOM.render(<Table dataSource={dataSource} columns={columns} />, document.getElementById('container'));

Form Controls

Provides form components like input fields, checkboxes, radio buttons, and forms with validation.

import { Form, Input, Button } from 'antd';

const FormComponent = () => (
  <Form>
    <Form.Item label='Username' name='username'>
      <Input />
    </Form.Item>
    <Form.Item label='Password' name='password'>
      <Input.Password />
    </Form.Item>
    <Form.Item>
      <Button type='primary' htmlType='submit'>Submit</Button>
    </Form.Item>
  </Form>
);

ReactDOM.render(<FormComponent />, document.getElementById('container'));

Feedback

Offers feedback components such as alerts, modals, notifications, and messages to interact with users.

import { message } from 'antd';

function success() {
  message.success('This is a success message');
}

ReactDOM.render(<button onClick={success}>Show success message</button>, document.getElementById('container'));

Navigation

Includes navigation components like menus, tabs, breadcrumbs, and paginations to guide users through the application.

import { Menu } from 'antd';

const { SubMenu } = Menu;

ReactDOM.render(
  <Menu mode='horizontal'>
    <Menu.Item key='mail'>Navigation One</Menu.Item>
    <SubMenu title='Navigation Two'>
      <Menu.Item key='submenu-item-1'>Option 1</Menu.Item>
      <Menu.Item key='submenu-item-2'>Option 2</Menu.Item>
    </SubMenu>
  </Menu>,
  document.getElementById('container')
);

Other packages similar to antd

material-ui

Also known as MUI, it is a popular React UI framework that follows Google's Material Design guidelines. It offers a different design philosophy compared to antd, which is more neutral and less opinionated, making it suitable for a wide range of projects.

react-bootstrap

It is a React component library that rebuilds the Bootstrap components with React. It provides a familiar Bootstrap-like interface for React applications, but it may not offer as many advanced components as antd does.

semantic-ui-react

This is the official React integration for Semantic UI. It is similar to antd in providing a wide range of components, but it follows the design principles of Semantic UI, which focuses on human-friendly design.

chakra-ui

Chakra UI is a simple, modular, and accessible component library that gives you the building blocks to build your React applications. It is known for its simplicity and ease of styling, which can be a contrast to antd's more out-of-the-box, styled components.

README

Ant Design

(English) （中文）

An enterprise-class UI design language and React-based implementation.

中文 README

Features

• An enterprise-class UI design language for web applications.
• A set of high-quality React components out of the box.
• Written in TypeScript with complete define types.
• A npm + webpack + dva front-end development workflow.

Environment Support

• Modern browsers and Internet Explorer 9+ (with polyfills)
• Server-side Rendering
• Electron

Let's build a better antd together

antd is an open source project; improvements are welcomed. If you are interested in contributing to antd, you can watch this repository, join in discussion, or try to implement some features which have been accepted. Actually, there are many ways to contribute. And we are always happy to offer collaborator permission for some active contributors.

Install

npm install antd

Usage

import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, mountNode);

And import style manually:

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

Use modularized antd

• Manually import

  import DatePicker from 'antd/lib/date-picker';  // for js
  import 'antd/lib/date-picker/style/css';        // for css
  // import 'antd/lib/date-picker/style';         // that will import less
  

• Use babel-plugin-import

  // .babelrc or babel-loader option
  {
    "plugins": [
      ["import", { "libraryName": "antd", "style": "css" }] // `style: true` for less
    ]
  }
  

  Then you can import components from antd, equivalent to import manually below.

  // import js and css modularly, parsed by babel-plugin-import
  import { DatePicker } from 'antd';
  

TypeScript

// tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "node",
    "jsx": "preserve",
    "allowSyntheticDefaultImports": true
  }
}

Note:

• set allowSyntheticDefaultImports to prevent error TS1192: Module 'react' has no default export.
• Don't use @types/antd, antd provide a built-in ts definition already.

Use ts-import-plugin with modularized antd

{
  loader: "ts-loader", // or awesome-typescript-loader
  options {
    getCustomTransformers: () => ({
      before: [ tsImportPluginFactory({ libraryName: "antd", style: "css" }) ]
    })
  }
}

Internationalization

See i18n.

Links

• Home page
• Components
• Ant Design Pro
• Change Log
• Scaffold Market
• rc-components
• Mobile UI
• Motion
• Developer Instruction
• Versioning Release Note
• FAQ
• CodePen boilerplate for bug reports
• Awesome Ant Design
• Customize Theme

Development

$ git clone [e-mail]:ant-design/ant-design.git
$ npm install
$ npm start

Open your browser and visit http://127.0.0.1:8001 , see more at https://github.com/ant-design/ant-design/wiki/Development .

Contributing

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! :)