<a href="https://arco.design/mobile/react" target="_blank">
    <img alt="Arco Design Logo" width="200" src="https://avatars.githubusercontent.com/u/64576149?s=200&v=4"/>
</a>






<h1>Arco Design Mobile</h1>

基于 Arco Design 的 React UI 组件库。适用于移动端 H5 / WebView 环境。

English | 简体中文

特性

• 基于 TypeScript 提供 50+ 开箱即用的组件
• 简洁克制的 UI 设计 & 精确到像素的还原
• 追求极致的手指交互效果
• 重要组件线上大流量验证
• 细粒度且灵活的属性配置
• 支持服务端渲染
• 支持国际化
• 支持按需引入
• 支持主题配置

安装

npm package

// with npm
npm install @arco-design/mobile-react

// with yarn
yarn add @arco-design/mobile-react

示例

import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@arco-design/mobile-react/esm/button';
import '@arco-design/mobile-react/esm/button/style';

function App() {
  return (
    <Button>
      Hello World
    </Button>
  );
}

ReactDOM.render(<App />, document.getElementById('app'));

在 LLM 中使用

• 推荐：Context7，获取最新文档与代码示例
• 备选：GitMCP 等同类 MCP 服务
• 完整指南：https://arco.design/mobile/react/arco-design/pc/#/doc/use-llm

快速配置（Cursor）：

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    }
  }
}

提示词示例：

使用 Arco Design Mobile 创建一个带按钮和弹窗的页面，使用 context7

相关链接

• 官方文档
• 组件文档
• Figma 设计资源
• Awesome Arco

浏览器兼容性

|

Safari on iOS |

Android Webview | | --------- | --------- | | 9 | 4.4 |

参与贡献

贡献之前请先阅读 行为准则 和 贡献指南.

感谢所有为 Arco Design Mobile 做过贡献的人！

以及曾经的战友们：

License

MIT 协议

<a href="https://star-history.com/#arco-design/arco-design-mobile&Date"><img src="https://api.star-history.com/svg?repos=arco-design/arco-design-mobile&type=Date" style="max-width: 100%; width: 550px"/></a>