antd-mobile

antd-mobile is Ant Design’s React component library purpose-built for mobile web apps, offering more than 80 components spanning form inputs, pickers, navigation, feedback, and layout primitives. Each component is theme-able through CSS variables, so teams can restyle the whole library or build custom themes without forking source code or overriding deeply nested class selectors.

The library emphasizes small bundle size and runtime performance for mobile devices, ships with on-demand import support out of the box, and includes fluent gesture and animation handling for touch-first interactions like swipe, pull-to-refresh, and picker scrolling. It’s maintained by the Ant Design team alongside the desktop-focused antd library, sharing design-language conventions while targeting mobile viewports specifically.

What You Get

• 80+ mobile-optimized React components covering forms, navigation, feedback, data display, and layout
• CSS-variable-based theming for consistent, reliable customization without CSS overrides
• On-demand imports and tree-shaking-friendly ESM output for small bundle sizes
• Built-in gesture and animation handling (swipe, pull-to-refresh, picker scroll) tuned for touch devices
• Full TypeScript type definitions and bilingual (English/Chinese) documentation site

Common Use Cases

• Building a mobile-first web app or PWA that needs a consistent, polished component set quickly
• Replacing bespoke mobile form controls (pickers, cascaders, calendars) with tested, accessible equivalents
• Theming a mobile product to match a brand’s design tokens via CSS variable overrides

Under The Hood

Architecture The library is organized as one component per directory under src/components (83 directories at the time of inspection), each typically containing the component implementation, a co-located demo, and tests, plus shared hooks/, utils/, and global/ modules for cross-component concerns like locale and config context. A ConfigProvider supplies shared configuration (locale, theme tokens) down the component tree, following the same pattern as the desktop antd library. Tech Stack Written in TypeScript and built with Gulp into CommonJS (cjs/), ESM (es/), and UMD (umd/) outputs; styling is authored in Less compiled alongside CSS variables for runtime theming, and the docs/demo site is built with dumi. Husky manages git hooks, and ESLint/Stylelint/Prettier enforce style across TS, CSS, and Less files. Code Quality Tests are colocated with components (76+ .test.tsx files observed across the component tree), giving strong coverage of individual component behavior, interactions, and edge cases; CI runs lint, stylelint, and the test suite via GitHub Actions with Codecov reporting. The codebase’s long-running, high-contributor-count history (7,800+ commits, 300+ contributors) reflects consistent maintenance discipline rather than one-off contributions. API Design Components follow consistent prop-naming conventions across the library (e.g. value/onChange pairs, visible/onClose for overlays), mirroring antd’s desktop API so teams already familiar with Ant Design’s conventions have a low learning curve; documentation includes live, editable demos for every component via the dumi-powered docs site.