Arco Design

Overview

Arco Design is ByteDance's flagship enterprise design system and open-source component library. Built from years of internal production experience across ByteDance's global products, it provides comprehensive, production-tested components for both React and Vue 3.

Key Features

• 🏢 ByteDance Production Tested: Powers mission-critical internal and external enterprise applications with rock-solid stability.
• 🔄 Dual Framework Support: Native, first-class implementations for both React and Vue 3.
• 🎨 Arco Pro & Design Lab: Seamlessly configure design tokens via visual web tools and generate custom NPM theme packages.
• 🌐 Rich Ecosystem: Companion tools for icon sets, component extensions, and Figma UI kits.

Installation & Quick Start

npm install @arco-design/web-react

Basic React Example

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 />
      <Button type="primary">Primary Button</Button>
    </Space>
  );
}

When to Choose

• Ideal For: Corporate internal tools, data management portals, multi-framework teams (React + Vue), and ByteDance tech stack followers.
• Alternatives: For Alipay/Ant ecosystem, choose Ant Design; for Tencent ecosystem, choose TDesign.