About Arco Design
Overview
Arco Design is an enterprise design system created by ByteDance. It provides complete design and development resources so teams can build consistent products across web and mobile.
The system covers component libraries for React, Vue, and mobile, along with design guidance on color, typography, iconography, and layout. It also ships supporting tools such as DesignLab for style configuration, Palette for color management, IconBox for icons, ArcoPro for admin best practices, and a Material Market.
Key Benefits
- Ship interfaces faster with ready-made React, Vue, and mobile React component libraries.
- Keep products consistent through Design Tokens that store design decisions in JSON as the single source of truth.
- Customize themes with DesignLab, which generates personalized theme packages per business need.
- Manage brand assets with dedicated tools for colors, icons, and style configuration.
- Backend support is responsive, with maintainers answering issues and fixing problems quickly.
- Tens of thousands of projects trust the system, backed by more than 2.1 million total downloads.
How It Works
Developers install a component library such as @arco-design/web-react through npm and use the components directly. Designers apply the Figma and Sketch libraries. Teams adjust style by editing Design Tokens in JSON, which propagate changes across the system, and use DesignLab, Palette, and IconBox to generate and export personalized theme packages.
Use Cases
- Front-end developers build admin consoles and web applications from React and Vue component libraries.
- Product designers apply Figma and Sketch component libraries to keep visual design consistent.
- Cloud platform teams generate personalized theme packages to align multiple product lines, as done for Volcano Engine.
- Content teams assemble self-media publishing platforms with flexible components, as 今日头条 does for its 头条号 console.
- Security product teams soften serious interfaces with youthful colors and components, as 飞连 does for its office security tools.
- Live-streaming businesses offer no-code customizable room setup for marketing, education, and recruitment, as 企业直播 does.
Why Choose This Product
Arco Design combines a complete design-development resource set with fast, direct maintainer support that users report meets over 90% of their needs. Its design principles emphasize consistency, rhythm, clarity, and openness, and the approach is credited with reducing development time by letting teams focus on business logic rather than component internals.
Key Features
React component library
Provides a full React web component library installable via @arco-design/web-react.
Vue component library
Ships a Vue web component library alongside the React offering.
Mobile React library
Offers a dedicated React component library for mobile products.
Design Tokens
Stores design decisions as JSON name-value pairs covering colors, fonts, spacing, and border radius.
DesignLab theming
Generates personalized theme packages tuned to different business needs.
Palette color tool
Provides a color configuration tool for generating and managing palettes.
IconBox icon platform
Supplies an icon platform for selecting and managing icon assets.
ArcoPro admin patterns
Delivers middle- and back-office best-practice templates for building admin consoles.
CLI and Webpack plugin
Includes Arco CLI scaffolding and an Arco Webpack Plugin to speed up web development.
Design resource kits
Offers Figma, Sketch, and official icon design resource libraries for designers.