skills.rest
ZHLX2005
ZHLX2005COMMUNITY
Explore all skills by this author →
GitHub

arco-design-reference

Provides Arco Design React component usage, theming, and integration guidance.

3|1|Updated Apr 14, 2026
Search Tags:#typescript#theming#frontend#react#ui components#form#arco design
One-click install
npx skills add https://github.com/ZHLX2005/sl --skill arco-design-reference-zhlx2005
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: arco-design-reference
Source: https://github.com/ZHLX2005/sl/tree/main/skills/ui-component-library/references/arco-design
Command: npx skills add https://github.com/ZHLX2005/sl --skill arco-design-reference-zhlx2005

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @arco-design/web-react, @arco-design/icons, babel-plugin-import, and includes references (resource) components.

What problem does it solve? Developers building React applications with Arco Design often struggle with correct installation, on-demand imports, theme configuration, and component API differences compared to libraries like antd. This reference consolidates setup steps, component examples, and troubleshooting answers in one place. ## Core Features & Use Cases - Installation & Import Guidance: Covers full import, on-demand import with babel-plugin-import, and arco-plugin-style for automatic style loading. - Component API Examples: Provides ready-to-use code for Button, Table, Form, Modal, DatePicker, Select, Upload, and 60+ other components, including hook-style APIs like Form.useForm and Modal.useModal. - Theming & Internationalization: Explains ConfigProvider token-based theming, dark mode, RTL support, and 21 locale packages. - Use Case: When building an enterprise admin dashboard in React and needing to configure a RangePicker with shortcuts or validate a dynamic Form.List, consult this reference for exact props and patterns. ## Quick Start Ask how to use a specific Arco Design component or configure its theme in your React project, and load this reference for the answer.

Frequently Asked Questions about arco-design-reference

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I install and import Arco Design in a React project?▼

Install @arco-design/web-react via npm, yarn, or pnpm, then import the global CSS file arco.css and components from the package root. For smaller bundles, use on-demand imports from the es directory with babel-plugin-import or arco-plugin-style.

What is the difference between Arco Design and antd?▼

Arco Design offers a similar component API to antd but with hook-style patterns like Form.useForm and Modal.useModal, plus a built-in token-based theme system and dark mode. It follows ByteDance's design language for enterprise admin interfaces.

Does Arco Design support dark mode and custom themes?▼

Yes, Arco Design supports theming through ConfigProvider theme tokens such as colorPrimary and borderRadius, and dark mode via theme switching or algorithmic gray inversion. You can also export theme packages from the arco.design/themes platform.

Why are Arco Design styles not loading in my project?▼

Styles fail when the global CSS import '@arco-design/web-react/dist/css/arco.css' is missing. If using on-demand imports, ensure babel-plugin-import or arco-plugin-style is configured to load component styles automatically.

Which React versions does Arco Design support?▼

Arco Design supports React 16, 17, 18, and 19, shipping TypeScript types with the package. A react-19-adapter utility is included for React 19 compatibility.

When should I not use Arco Design?▼

Avoid Arco Design for Vue projects, where element-plus or naive-ui are better fits, and for mobile H5 pages, where Arco Mobile should be used instead. It targets React desktop and admin applications.

Related Skills

Explore More Software Engineering Skills→
pantheon-orgpantheon-org
9

nx-vite-integration

Configure Vite as the build tool within Nx monorepos.

Official
Intermediate
Camilo8902Camilo8902

page-layout-builder

Generate page layouts and shells for dashboards, authentication, settings, and CRUD interfaces.

Community
Intermediate
bykoleksii-hardobykoleksii-hardo

ckm:design-system

Generate CSS variables from design tokens JSON configurations.

Community
Advanced
wesweetwesweet
1

antd

Guide Ant Design form management with the useForm hook in React.

Community
Basic