Guide · Open source

How to use ant-design-mobile: install and build mobile web UIs

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

Ant Design Mobile (npm package antd-mobile) is a library of prebuilt UI components for mobile web applications. This guide shows you how to install it with a package manager, understand what it is designed for, customize its appearance, and find help when you get stuck. By the end you will know the setup steps and where to go next in the official docs.

Ant Design Mobileant-design/ant-design-mobile · ★ 12.1k · MIT Install options & downloads

Quick start

1Check prerequisites. Make sure Node.js is installed and choose npm, yarn, pnpm or bun as your package manager.
2Install the package. Run the install command for your package manager, such as npm install antd-mobile.
3Import components. Import the components you need from antd-mobile into your React app.
4Customize with CSS variables. Adjust component appearance or create a theme by overriding the library's CSS variables.
5Test in Codesandbox. Optionally open the README's Codesandbox example to try components without a local setup.
6Get help. Read the English docs at mobile.ant.design or ask in GitHub discussions if you get stuck.

What is ant-design-mobile and who is it for?

Ant Design Mobile is a set of essential user interface blocks for building mobile web apps. Instead of building buttons, lists and gestures from scratch, you install the library and add its components to your app.

It suits developers building mobile-friendly web apps with React, teams already using Ant Design who want a mobile counterpart, and projects that want theming through CSS variables. It is not meant for native iOS or Android apps, since the README describes it for mobile web apps and does not mention native support.

Good fit: mobile-friendly React web apps, prebuilt gestures and animations
Poor fit: native iOS or Android apps, no-code site builders, projects that cannot use TypeScript or a JavaScript build setup

What do you need before you install antd-mobile?

You need Node.js, plus one package manager: npm, yarn, pnpm or bun. The README does not state a required Node.js version, so check the official docs at mobile.ant.design for that detail.

The project is written in TypeScript and installed through npm-style tooling, so your app should use a JavaScript build setup.

Node.js (the README does not specify a version)
npm, yarn, pnpm or bun

Install antd-mobile with your package manager

Run the install command that matches your package manager from your project folder. The package name is antd-mobile, not ant-design-mobile.

npm install antd-mobile
# or
yarn add antd-mobile
# or
pnpm add antd-mobile
# or
bun add antd-mobile

Use components and customize the look with CSS variables

After installing, import the components you need into your app. The library is designed to include only what you use, so each component is there because you chose it.

Appearance is customized through CSS variables. You can adjust how components look or create your own theme without rewriting component code. Check the official documentation at mobile.ant.design for the exact variable names and import examples.

Fast: optimized for package size and performance without configuration
Customizable: adjust appearance with CSS variables or build your own theme
Atomic: each component does one job, with no extra features
Fluent: smooth gestures and animations are built in

Try antd-mobile in the browser first

If you want to test components before setting up a project, the README links to a Codesandbox example. You do not need to prepare a development environment to use it.

If you find a bug or want a feature, open an issue on GitHub. For usage questions, the README points to the GitHub discussions page.

What people use it for

Building a mobile-friendly React web app with prebuilt lists, buttons and gestures
Adding a mobile counterpart to an existing Ant Design desktop project
Theming components to match a brand through CSS variables
Prototyping mobile UI quickly in Codesandbox before setting up a project

Frequently asked questions

Is ant-design-mobile free to use?

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

What is the install command for ant-design-mobile?

The npm package is named antd-mobile. Run npm install antd-mobile, or use yarn add, pnpm add or bun add with the same package name.

Does ant-design-mobile work for native iOS or Android apps?

The README describes it for mobile web apps and does not mention native support. If you need native apps, look at other tools built for that purpose.

What do I need installed to use ant-design-mobile?

You need Node.js and one of npm, yarn, pnpm or bun. The README does not state a Node.js version, so check the official docs.

How do I customize ant-design-mobile styles?

The library is customizable through CSS variables, which let you adjust component appearance or create your own theme. The official docs at mobile.ant.design describe the variables.

What are alternatives to ant-design-mobile?

Projects often compared with it include Ant Design for desktop, Mantine, Chakra UI and Framework7. Choose based on whether you need a React mobile web library, a desktop-focused system or a framework for mobile apps.

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 Mobile suits React developers building mobile web apps who want prebuilt components, gestures and CSS variable theming, especially if they already use Ant Design. If you need native iOS or Android apps, a no-code builder, or your project cannot use TypeScript or an npm-style build, pick a different tool.

Install options & downloads