Arco Design：字节跳动 React 组件库安装与主题定制指南

一、项目官方信息

Arco Design 是字节跳动开源的基于 Arco Design 系统的 React 组件库，提供完整、现代的组件与主题能力。

二、官方图片

上图为 Arco Design 仓库在 GitHub 上的社交预览图。

三、环境要求

• React 16+；
• Node.js 16+；
• npm/yarn。

四、安装步骤

1. 安装依赖

npm install @arco-design/web-react

2. 引入样式

import '@arco-design/web-react/dist/css/arco.css';

3. 使用组件

import { Button, Message } from '@arco-design/web-react';

function App() {
  return (
    <Button type="primary" onClick={() => Message.info('Hello Arco')}>
      主要按钮
    </Button>
  );
}

4. 按需加载

Arco 提供按需插件，配合 ESM tree-shaking。

五、使用方法

• 组件丰富：表单、表格、导航、反馈等 60+；
• 主题定制：通过 Design Token 与官网平台换肤；
• 暗色模式：内置；
• 国际化：多语言；
• 图标：配套 Arco Icons。

六、常见问题 FAQ

1. Arco 是谁开源的？ 字节跳动。

2. 支持 React 几？ React 16+。

3. 怎么换主题？ 在 Arco 主题平台修改 token 后引入样式文件。

4. 有 Vue 版吗？ 有，arco-design/web-vue。

5. 支持按需加载吗？ ESM + tree-shaking。

6. 协议是什么？ MIT。

七、跳转链接

• GitHub 仓库：arco-design/arco-design
• 官网：arco.design
• 中文文档：README.zh-CN