Skip to content

Guide · Open source

How to use Ant Design Pro: clone, install and run

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

Ant Design Pro is an open-source React and TypeScript starter for enterprise web applications, built on the Ant Design component library. It ships with ready-made pages such as dashboards, forms, lists, profiles and login screens. This guide shows you how to get it running locally, what is included, and how to decide whether it suits your project.

Ant Design Proant-design/ant-design-pro · ★ 38.9k · MIT

Quick start

  1. 1Clone the repository. Run git clone with --depth=1 to fetch the project into a folder called myapp.
  2. 2Enter the project folder. Change into the myapp directory where the project was cloned.
  3. 3Install dependencies. Run npm install to download the project's dependencies.
  4. 4Start the development server. Run npm start to launch the full version of the project locally.
  5. 5Explore the templates. Open the pages listed in the template tree, such as Dashboard, Form and List, and adapt them to your data.
  6. 6Build for production. Run npm run build when you are ready to create a build.

What Ant Design Pro includes

Ant Design Pro is a React boilerplate for building enterprise applications. Instead of setting up layout, routing and common pages from scratch, you start from a project that already has them.

The project lists a set of built-in templates, including Welcome, Dashboard (Analysis, Monitor, Workplace), Form (Basic, Step, Advanced), List, Profile, Result, Exception (403, 404, 500), Account, AI Assistant and User (Login, Register, Register Result).

  • Theming with Tailwind CSS v4 and antd-style
  • Built-in i18n solution
  • Mock development for screens before a backend exists
  • Unit and e2e tests plus a lint workflow

What you need before you install

You need Node.js and npm. The README does not specify a Node.js version, so check the project's own files or documentation before you start. You also need git to clone the repository.

The template assumes you are comfortable with React, TypeScript and the command line, because setup and customization depend on those skills.

  • Node.js (version not specified in the README)
  • npm
  • git

Install and start Ant Design Pro

Clone the repository into a folder named myapp, move into it, install dependencies and start the development server. The README describes the development server as the full version by default.

git clone --depth=1 https://github.com/ant-design/ant-design-pro.git myapp cd myapp npm install npm start

Build the project

When you are ready to produce a build, run the build script from the project folder. The README lists it under its Build section.

npm run build

Reduce it to a minimal version (optional)

The project includes all blocks by default. If you need something smaller, the README describes a simple version script. Be aware that this step is irreversible and permanently deletes files.

According to the README, the script removes extra page directories such as dashboard, form, list, profile, result, exception and account, removes extra mock files, replaces routes with the simple version, and removes extra dependencies from package.json.

  • Commit your project to version control before running it, so you can recover files if needed
  • Only run it when you are sure you do not need the removed pages
npm run simple

Keep your project up to date with AI skills (optional)

The project ships with two Claude Code Skills in .claude/skills/. The /pro-upgrade skill is described as auto-upgrading to the latest Ant Design Pro version while preserving your business code. The /antd skill queries antd component APIs, props and tokens, and lints for deprecated usage.

The README also notes that you can run npx skills add ant-design/ant-design-pro to refresh the skill definitions.

/pro-upgrade /antd

What people use it for

  • Internal admin dashboards and back-office tools in React
  • Starting a team project from Ant Design components and page templates
  • Building screens against mock data before a backend exists
  • Starting a project that already includes tests and a lint workflow

Frequently asked questions

Is Ant Design Pro free to use?

Ant Design Pro is released under the MIT licence, as stated in the repository. Check the LICENSE file in the project for the full terms before using it in a commercial product.

What do I need to install Ant Design Pro?

You need Node.js and npm, plus git to clone the repository. The README does not specify which Node.js version to use, so verify this in the project before you begin.

How do I install and run Ant Design Pro?

Clone the repository with git clone --depth=1, change into the myapp folder, run npm install, then run npm start. The development server starts with the full version of the project by default.

What is the difference between Ant Design Pro and Ant Design?

Ant Design is a component library. Ant Design Pro is a starter project built on that library, adding ready-made page templates, routing and layout so you do not have to build them yourself.

Can I use Ant Design Pro without a backend?

Yes. The project includes a mock development solution, which lets you build and review screens before a backend exists.

What are the alternatives to Ant Design Pro?

The README lists Refine, React Admin, Tabler and Material Dashboard React as comparable projects. Choose based on which component library and framework your team already uses.

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 Pro suits developers who already work with React, TypeScript and Ant Design and want a full set of admin pages to start from. It is a poor fit for people uncomfortable with the command line, projects that do not use React or Ant Design, or teams that only need a very small static site.

Install options & downloads