Antd, also known as Ant Design, is an enterprise-class UI design language and library for building user interfaces. It serves as a robust React UI library offering a high-quality set of React components out of the box. Antd is specially designed for web applications, including support for internationalization for dozens of languages, server-side rendering, and Electron. Furthermore, it’s written in TypeScript offering predictable static types and has a powerful theme customization based on CSS-in-JS.
To use Antd, first, you need to install it in your project using npm, Yarn, or pnpm like so:
npm install antd
or
yarn add antd
or
pnpm add antd
After it's installed, you can import specific components from Antd and use them in your code. Here is a basic usage example in a React component:
import React from 'react';
import { Button, DatePicker } from 'antd';
const App = () => (
<>
<Button type="primary">PRESS ME</Button>
<DatePicker placeholder="select date" />
</>
);
In the example above, a button and a date picker are imported from Antd, and they are used in the App component. type="primary" on the Button gives it the primary button styles, and placeholder="select date" provides placeholder text for the DatePicker.
If you're using TypeScript, Antd provides complete definitions and you can get started with it by checking Use in TypeScript.
You can find comprehensive Antd documentation, including a guide on how to install, use, and customize the library, over at the Antd website here. Antd also has specific sections on TypeScript usage, internationalization, and a FAQ section to solve commonly asked questions. You can also explore links to related resources such as Ant Design Pro, Mobile UI, Mini Program UI and others in the Antd documentation.
