@arco-design/web-react — An enterprise-level React UI component library produced by ByteDance's ArcoDesign team.
Key Specifications
- Import:
import { Button, Table, Form } from '@arco-design/web-react' - Icons:
import { IconXxx } from '@arco-design/web-react/icon' - Types:
import type { ButtonProps } from '@arco-design/web-react' - Styles: Full
import '@arco-design/web-react/dist/css/arco.css'or on-demand loading - Date library: dayjs (not moment)
- Controlled mode:
value+onChange; Uncontrolled mode:defaultValue - Child components: Access via
Component.SubComponent, such asForm.Item、Select.Option、Menu.SubMenu
How to Use This Skill Set
When you need to use Arco Design components, load the corresponding reference files according to specific needs:
When initializing a project
- Quick Start — Installation, import, on-demand loading configuration
- Global Configuration ConfigProvider — Uniformly set size, theme, language
- Theme Customization — CSS variables, Less variables, dark mode
- Internationalization i18n — Multi-language switching
When you need to understand component mechanisms
- Architecture and Design Patterns — Controlled/uncontrolled, Props merging, Ref forwarding, CSS naming
When using specific components
Load the corresponding component files to get the complete API and examples:
| Category | Components |
|---|---|
| General | Button, Icon, Typography, Link, Divider |
| Layout | Grid, Layout, Space |
| Navigation | Menu, Tabs, Dropdown, Breadcrumb, Pagination, Steps, Affix, Anchor, PageHeader |
| Data Entry | Form, Input, Select, DatePicker, TimePicker, InputNumber, Checkbox, Radio, Switch, Slider, Rate, Cascader, TreeSelect, Transfer, AutoComplete, Mentions, InputTag, Upload, ColorPicker, VerificationCode |
| Data Display | Table, List, Card, Tree, Tooltip, Popover, Avatar, Badge, Tag, Carousel, Collapse, Descriptions, Calendar, Comment, Empty, Image, Statistic, Timeline |
| Feedback | Modal, Message, Notification, Drawer, Alert, Progress, Popconfirm, Result, Skeleton, Spin |
| Other | BackTop, Portal, ResizeBox, Trigger, Watermark |
When implementing complex scenarios
- Form Patterns — Dynamic forms, linked validation, nested forms, asynchronous submission
- Table Patterns — Remote data, editable rows, virtual scrolling, custom filtering
- Popup Patterns — Form modals, confirmation flows, nested drawers
- Controlled and Uncontrolled — How to choose and switch between the two modes
- Responsive Design — Grid breakpoints, adaptive layout
When using Hooks
- Hooks Reference — Common and internal Hooks such as useResponsive, useFocusEffect, etc.