Library Arco-Design 字节跳动出品的企业级React UI库

企业级 React 应用里，组件库不只是“有按钮表格”就够了——还要统一的设计语言、可配置的主题、完善的 TypeScript 类型、以及能直接落地的设计规范。团队常陷在“组件库 + 设计规范 + 配置工具”三者割裂的尴尬。
Arco Design 的思路，是把设计与研发打包成一套同源的方案。

项目基本信息

一、项目介绍

arco-design/arco-design 是字节跳动开源、MIT 协议的企业级 UI 设计-研发解决方案，以 React 实现为主（也提供 Vue 版 Arco Vue）。它提供一套完整的设计语言、几十个高质量组件、主题定制工具（Arco Design Lab）、图标库与高效 CLI，组件 TypeScript 类型完善，覆盖中后台常见场景。它由字节内部长期打磨，强调“设计语言与代码同源”，适合需要统一视觉与研发规范的团队。

二、核心优势

1. 设计研发一体：设计语言与 React 组件同源，规范直接落地。
2. 组件高质量：几十个中后台组件，TypeScript 类型完善。
3. 主题可定制：配 Arco Design Lab 可视化配置主题与令牌。
4. 图标与 CLI：内置图标库与脚手架，开箱提效。
5. 大厂背书：由字节跳动长期内部打磨，稳定性有保障。

三、适用场景

• 字节技术栈或想复用其设计语言的企业应用。
• 需要统一设计规范 + 高质量 React 组件的团队。
• 中后台项目希望主题可配置、类型完备。
• 希望设计稿与代码一致、减少还原成本的团队。

四、安装教程

在 React 项目中安装：

npm install @arco-design/web-react

在入口引入样式与 ConfigProvider：

import '@arco-design/web-react/dist/css/arco.css'
import { ConfigProvider } from '@arco-design/web-react'
<ConfigProvider> <App/> </ConfigProvider>

常见报错：未引入 arco.css 会样式缺失；按需加载需配 babel 插件或走官方推荐方式。

五、使用示例

使用组件（示例 Button）：

import { Button } from '@arco-design/web-react'
<Button type="primary" onClick={onSubmit}>提交</Button>

真实效果：按钮沿用 Arco 设计语言与全局主题；通过 ConfigProvider 可统一语言包、主题令牌，数据表格、表单、弹窗等按需引入即保持一致视觉。

六、常见问题

Q：Arco 和 Ant Design 怎么选？
A：Arco 由字节出品、强调设计-研发同源与可视化主题工具；Ant Design 生态更大、社区更广，按团队偏好与既有栈选。
Q：有 Vue 版吗？
A：有，官方提供 Arco Vue（@arco-design/web-vue），与 React 版同源设计语言。
Q：协议能商用吗？
A：采用 MIT License，可商用与修改，需保留版权与许可声明。

七、总结

Arco Design 把字节跳动打磨的企业级设计语言与 React 组件打包成同源方案，主题可定制、类型完备，适合重视设计规范与研发一致性的团队。对 React 中后台，它是 MIT 协议、由大厂长期打磨的务实选择。