arco-design
Arco Design is a comprehensive React UI component library (60+ components) built on ByteDance's Arco Design system, with strong TypeScript support, extensive theming via design tokens, and a surrounding ecosystem for themes, materials, and icons.
Embed badge
[](https://opensources.dev/resource/arco-design)MITPermissive — free to use in commercial and proprietary software, with attribution.View license →
Production readiness
5/5- Actively maintainedCommits in the last 6 months
- No known vulnerabilitiesNo OSV advisories
- Clear, usable licenseMIT (permissive)
- Proven adoptionWidely used
- Has documentationDocumentation indexed
npm install @arco-design/web-reactOur analysis
Arco Design is an enterprise-oriented React UI component library implementing ByteDance's Arco design system, offering 60+ ready-to-use, fully typed components plus tooling for theme customization and reusable materials.
When to use arco-design
Use it when building data-dense, enterprise web applications in React that need a polished, consistent design language out of the box, with strong TypeScript types, dark mode, and the ability to deeply customize themes via design tokens. The ecosystem (Design Lab, Material Market, Arco Pro scaffolding) is appealing for teams wanting a full design-to-code workflow.
When not to
Avoid it for non-React stacks (use the separate Vue version instead), for highly bespoke/branded marketing sites where a heavyweight component set adds bloat, or where a larger English-speaking community and ecosystem matter — Ant Design or MUI have far broader adoption and third-party support. Headless libraries (Radix, Headless UI) are better if you need full visual control.
Strengths
- Large catalog (60+) of polished, enterprise-ready components
- Written entirely in TypeScript with good type definitions
- Powerful token-based theming, including a visual Design Lab and dark mode
- Rich surrounding ecosystem: material market, icon manager, Pro scaffold, Figma kit
Trade-offs
- Documentation and community are heavily China-centric; English resources are thinner
- Aesthetically similar to Ant Design, which can make it feel derivative
- Comes with opinionated styling that requires effort to fully escape
- Smaller community and fewer third-party integrations than the market leaders
Maturity
Mature and actively maintained, backed by ByteDance and used in production across many of their products. With ~5.6k stars it is well-established though less ubiquitous than Ant Design, and benefits from a coordinated multi-project ecosystem (React, Vue, plugins, theme tooling).
A comprehensive React UI components library based on the Arco Design system.
English | 简体中文
Features
Comprehensive
With more than 60 crafted components that you can use out of the box.
Customizable theme
Extensive design tokens can be customized to build your own theme. Two ways of customization are supported:
Design Lab - Recommended!
Reusable custom materials
Material market provides a one-stop solution for materials management. Reuse customized modules to make a breakthrough in efficiency.
TypeScript friendly
All components are written in TypeScript so it's type friendly.
Installation
Available as an npm package
// with npm
npm install @arco-design/web-react
// with yarn
yarn add @arco-design/web-react
Examples
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@arco-design/web-react';
import '@arco-design/web-react/dist/css/arco.css';
function App() {
return (
<Button type='secondary'>
Hello World
</Button>
);
}
ReactDOM.render(<App />, document.getElementById('app'));
Useful Links
Ecosystems
ProjectDescriptionVue Component LibraryA comprehensive Vue UI components library based on the Arco Design systemDesign LabA platform to create and manage your themes with ease.Material MarketA platform that provides massive high-quality customized materials to greatly boost development efficiency.Icon BoxOne-stop platform to manage your icons.Arco ProA solution to quickly building applications from scratch.
Browser Support
IE / EdgeFirefoxChromeSafariOperaElectronEdge 1631493136last 2 versions
Contributing
Developers interested in contributing should read the Code of Conduct and the Contributing Guide.
Thank you to all the people who already contributed to ArcoDesign!
License
This project is MIT licensed.