Arco Design React

Arco Design React (@arco-design/web-react) is a comprehensive React UI component library built on the Arco Design system, developed and open-sourced by ByteDance. It provides more than sixty production-ready TypeScript components spanning layout, data entry, data display, feedback, and navigation.

Designed for building enterprise-grade web applications, Arco ships first-class theming and design tokens, a ConfigProvider for global configuration and internationalization, and deep TypeScript typing throughout. It is used across many ByteDance products and offers a mature, well-documented alternative to other large React component libraries.

What You Get

• 60+ TypeScript React components across data entry, display, feedback, and navigation
• A ConfigProvider for global configuration, locale, and internationalization
• Design tokens and theming powered by @arco-design/color for full customization
• Rich data components including Table, Form, DatePicker, and Cascader
• First-class TypeScript typings and accessibility-focused primitives

Common Use Cases

• Building enterprise dashboards and admin consoles in React
• Standardizing UI across teams with a shared design system
• Theming an application to match brand colors via design tokens
• Assembling complex forms and data tables with prebuilt components

Under The Hood

Architecture The repository is the monorepo for @arco-design/web-react. The components/ directory holds 77 entries, one per component (Button, Form, Table, DatePicker, Cascader, and so on) plus shared internals under _util, _hooks, and _class. Components are authored in TypeScript as React function/class components with a consistent prop and ref API, wired through a ConfigProvider context for global locale and configuration. A separate hooks/ package, an icon/ package, and a documentation site/ with stories/ round out the workspace, and build scripts under scripts/ produce the distributed ESM/CJS bundles.

Tech Stack TypeScript and React (peer dependency React >=16), with runtime helpers including dayjs for dates, lodash utilities, @arco-design/color for theming, react-focus-lock, react-transition-group, resize-observer-polyfill, and scroll-into-view-if-needed. The build uses Babel runtime, and the project is managed with Yarn workspaces.

Code Quality The repo carries a substantial testing setup under tests/ (Jest with mount tests, demo tests, screenshot tests, and DOM setup) and per-component __test__ suites, indicating strong regression coverage across the library. Code is uniformly typed, organized one directory per component, and maintained actively with frequent commits by a large team.

API Design Component APIs follow familiar React conventions, controlled/uncontrolled props, onChange handlers, and forwarded refs, so developers coming from other component libraries feel at home. Global behavior (locale, prefix, component defaults) is configured once via ConfigProvider, and theming is handled through design tokens rather than ad-hoc overrides. Extensive documentation and live demos on arco.design keep the learning curve manageable despite the library’s breadth.