Arco Design — Comprehensive React UI Library by ByteDance

Introduction

Arco Design is a design system and React component library created by ByteDance. It provides 60+ production-quality components with consistent styling, a flexible theming system based on design tokens, and tooling for rapid enterprise UI development. A separate Vue 3 version is also available.

What Arco Design Does

• Provides 60+ React components: tables, forms, date pickers, trees, uploads, and notifications
• Offers a design token system for theming via CSS variables and Less overrides
• Includes built-in dark mode that toggles with a single class change
• Ships with an icon library and a design resource kit for Figma
• Supports on-demand component loading for optimized bundle sizes

Architecture Overview

Arco Design components are built with React hooks and TypeScript. Styling uses Less with CSS variables for runtime theming. The design token layer defines colors, spacing, radius, and typography as variables that cascade through components. An optional CLI (arco-cli) scaffolds projects with Arco Design pre-configured. The component library is tree-shakeable when using the babel-plugin-import or built-in ESM imports.

Self-Hosting & Configuration

• Install with npm install @arco-design/web-react
• Import the CSS with import '@arco-design/web-react/dist/css/arco.css'
• Use ConfigProvider to set locale, theme variables, and component defaults
• Enable dark mode by adding arco-theme-dark class to the body element
• Tree-shake unused components with babel-plugin-import or native ESM imports

Key Features

• Design token system enables full theme customization via CSS variables
• Dark mode built into every component with a single class toggle
• Table component supports virtual scrolling, column pinning, and custom cell rendering
• Form component handles validation, dynamic fields, and complex nested layouts
• Arco CLI generates project scaffolds, component templates, and theme packages

Comparison with Similar Tools

• Ant Design — More established with a larger community; Arco offers a fresh design language and built-in dark mode
• Material UI — Google's Material Design for React; Arco follows its own enterprise-focused design system
• Mantine — Hooks-centric with strong defaults; Arco's design token system offers more structured theming
• Chakra UI — Style props approach; Arco uses traditional className and CSS variables
• Semi Design — Also from a Chinese tech company; Arco has broader component coverage

FAQ

Q: Is Arco Design production-ready? A: Yes. It is used internally at ByteDance across multiple products and maintained actively.

Q: Is there a Vue version of Arco Design? A: Yes. @arco-design/web-vue provides the same components and design system for Vue 3.

Q: How do I customize the theme? A: Override Less variables at build time, use the ConfigProvider component, or modify CSS custom properties at runtime.

Q: Does Arco Design support internationalization? A: Yes. The ConfigProvider accepts a locale prop with built-in support for 20+ languages.

Sources

• https://github.com/arco-design/arco-design
• https://arco.design