Arco Design

项目概述

Arco Design 是由字节跳动体验科技团队开源的企业级设计系统与组件库。源自字节跳动内部大量业务场景的打磨沉淀，同时提供 React 与 Vue 3 两个技术栈的高质量官方实现。

结合强大的 Arco DesignLab 主题配置平台，企业可以极其轻松地定制属于自己业务品牌的专属设计规范。

核心特性

• 🏢 字节跳动生产验证：历经字节跳动复杂业务场景打磨，稳定性高，交互细节考究。
• 🔄 双框架原生支持：为 React 与 Vue 3 技术栈分别提供一流水准的原生组件包。
• 🎨 强大的 DesignLab 主题配置平台：通过在线可视化编辑器微调上百个 Design Tokens 并一键导出专属 NPM 主题包。
• 🌐 完备的中后台解决方案：提供 Arco Design Pro 开箱即用开箱脚手架及丰富的矢量图标库。

快速上手与示例代码

npm install @arco-design/web-react

React 基础调用示例

import React from 'react';
import { Button, Space, DatePicker } from '@arco-design/web-react';
import '@arco-design/web-react/dist/css/arco.css';

export default function App() {
  return (
    <Space direction="vertical">
      <DatePicker placeholder="选择日期" />
      <Button type="primary">确认提交</Button>
    </Space>
  );
}

技术选型建议与适用场景

• 非常适合：企业大型中后台管理平台、同时维护 React 与 Vue 多技术栈的产研团队及青睐字节跳动设计工程美学的项目。
• 不适用场景：对原子化纯 CSS（如 Tailwind）有强依赖、希望零 CSS 运行时绑定的轻量级落地页。