Guide · Open source

How to use Ant Design (antd): install and build React screens

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

Ant Design is an open-source UI library for React, written in TypeScript, that provides ready-made components such as buttons and date pickers plus a design language to keep screens consistent. This guide is for developers building web applications in React. By the end you will know how to install the antd package, import components, and where to look for theme customization and internationalization.

Ant Designant-design/ant-design · ★ 100k · MIT Install options & downloads

Quick start

1Check prerequisites. Make sure Node.js is installed and choose npm, yarn, pnpm or bun.
2Install antd. Run the install command for your package manager, such as npm install antd.
3Import components. Import the components you need by name from 'antd' in your React file.
4Render the components. Place the components in your JSX, for example a Button with type primary.
5Customize the theme. Follow the Customize Theme docs page to adjust the default look.
6Check the docs. Use the Components Overview on ant.design for props and examples.

What Ant Design is and who it is for

Ant Design is described as an enterprise-class UI design language and React UI library. It gives you a set of high-quality React components out of the box, so you do not have to design every button, form field or picker from scratch.

It suits React developers building admin dashboards and internal business tools, teams that want a consistent visual style, and projects that need TypeScript types for their UI components. It is not a good fit for projects that do not use React, or for beginners who only want a simple static website, because the library assumes familiarity with React and a build setup.

Components such as buttons and date pickers ready to import
Written in TypeScript with static types
Theme customization based on CSS-in-JS
Internationalization support for dozens of languages

Install antd with npm, yarn, pnpm or bun

You need Node.js and a package manager. The package is published on npm under the name antd. Run the command that matches the package manager your project already uses, from the project folder.

npm: install antd with npm install antd
yarn: yarn add antd
pnpm: pnpm add antd
bun: bun add antd

npm install antd

Import and use your first component

Import the components you need by name from antd and render them like any React component. The example below imports Button and DatePicker, then renders a primary button and a date picker with placeholder text.

import { Button, DatePicker } from 'antd';

export default () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker placeholder="select date" />
  </>
);

Customize the theme

Ant Design supports theme customization through its CSS-in-JS system. The project's Customize Theme documentation page explains how to change the default look. Note that the design language is opinionated, so if your team needs a non-Ant visual style and does not want to override the default theme, a different library may be a better choice.

Theme customization is documented at ant.design/docs/react/customize-theme
Components are documented in the Components Overview on ant.design

Check browser and environment support

The README lists modern browsers, server-side rendering and Electron as supported environments. The support table lists Edge, Firefox, Chrome, Safari and Electron, each marked as last 2 versions.

Modern browsers (Edge, Firefox, Chrome, Safari)
Server-side rendering
Electron

Get help and run the project locally

The official docs, FAQ and online playground for reproducing bugs are linked from the README. If you want to work on the library itself, the README gives a clone-and-start sequence; it also mentions an online dev environment at opensumi.run.

Docs and FAQ: ant.design
Online Playground for bug reports: u.ant.design/reproduce
Developer Instruction is on the project wiki

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

What people use it for

Admin dashboards with tables, forms and date pickers
Internal business tools that need a consistent visual style
React web applications that need TypeScript types for UI components
Electron desktop apps built with React

Frequently asked questions

How do I install Ant Design?

Install the package named antd from npm with npm install antd. The README also lists yarn add antd, pnpm add antd and bun add antd. You need Node.js and one of these package managers.

Is Ant Design free to use?

The project is released under the MIT licence, as stated on its GitHub listing. Check the licence file in the repository for the full terms before using it in a commercial product.

Does Ant Design work without React?

No. The README describes Ant Design as a React UI library and the components are built for React. If your project does not use React, pick a library built for your framework.

Does Ant Design support TypeScript?

Yes. The library is written in TypeScript and provides static types for its components.

How does Ant Design compare to Material UI or Chakra UI?

Ant Design is a React component library with an opinionated design language and CSS-in-JS theming. Material UI, Chakra UI, Mantine and shadcn/ui are comparable projects you can evaluate against your needs for visual style and theming.

Can I change the default look of Ant Design?

Yes, through theme customization based on CSS-in-JS. The Customize Theme page on ant.design explains how. If you need a very different visual style, the default design language may be too opinionated for your project.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Ant Design is a good choice for React developers building admin dashboards and internal tools who want a consistent, typed component set quickly. Skip it if you do not use React, want a simple static site, or need a visual style far from the default theme, and consider a comparable library instead.

Install options & downloads