Arco Design React — Skills Reference
@arco-design/web-react — An enterprise-level React UI component library by ByteDance.
Critical Conventions
Always follow these rules when writing Arco Design code:
- Imports:
import {Button, Table, Form} from '@arco-design/web-react'— always from the package root, never from sub-paths like@arco-design/web-react/es/Button - Icons:
import {IconSearch, IconPlus} from '@arco-design/web-react/icon' - Types:
import type {TableProps, FormInstance} from '@arco-design/web-react' - Styles:
import '@arco-design/web-react/dist/css/arco.css'(full) or configure on-demand loading - Date library: dayjs (NOT moment.js)
- Controlled mode:
value+onChange; Uncontrolled:defaultValue - Sub-components: accessed via
Component.Subpattern —Form.Item,Select.Option,Menu.SubMenu,Input.Search,Input.TextArea,Grid.Row,Grid.Col - Form.Item uses
fieldprop (notnamelike Ant Design) - Switch in Form requires
triggerPropName="checked"
Skill Index
Load the relevant file below for full API reference, code examples, and best practices.
Setup & Configuration
| Topic | File | When to use |
|---|---|---|
| Installation | getting-started.md | Install @arco-design/web-react, import styles, configure tree-shaking or babel-plugin-import |
| Global Config | config-provider.md | Set global component size, theme, locale, default props via <ConfigProvider> |
| Theming | theming.md | Custom theme colors, CSS variable overrides, Less variables, dark mode toggle |
| Internationalization | internationalization.md | Switch languages, add locale packs, customize locale text |
| Architecture | architecture.md | Understand controlled/uncontrolled patterns, props merging, ref forwarding, CSS naming |
General Components
| Component | File | Use for |
|---|---|---|
| Button | button.md | Buttons, button groups, icon buttons, loading state |
| Icon | icon.md | Built-in icons (IconXxx), custom SVG icons, IconFont |
| Typography | typography.md | Headings, paragraphs, text ellipsis, copyable/editable text |
| Link | link.md | Hyperlinks with icon, hover states |
| Divider | divider.md | Horizontal/vertical dividers, dividers with text |
Layout
| Component | File | Use for |
|---|---|---|
| Grid | grid.md | 24-column Row/Col grid, responsive breakpoints (xs/sm/md/lg/xl/xxl), gutter |
| Layout | layout.md | Page skeleton: Header, Sider, Content, Footer, collapsible sidebar |
| Space | space.md | Consistent spacing between elements, horizontal/vertical, wrap |
Navigation
| Component | File | Use for |
|---|---|---|
| Menu | menu.md | Sidebar nav, top nav bar, sub-menus, menu groups, collapsible |
| Tabs | tabs.md | Tab switching, card tabs, editable/closable tabs, extra content |
| Dropdown | dropdown.md | Dropdown menus, context menus, button dropdowns |
| Breadcrumb | breadcrumb.md | Navigation hierarchy path, route breadcrumbs |
| Pagination | pagination.md | Page navigation, size changer, simple/mini mode |
| Steps | steps.md | Step-by-step workflows, vertical/dot steps, error state |
| Affix | affix.md | Pin element to viewport on scroll |
| Anchor | anchor.md | In-page anchor navigation, scroll-to-section |
| PageHeader | page-header.md | Page title + back button + breadcrumb + actions |
Data Entry
| Component | File | Use for |
|---|---|---|
| Form | form.md | Form building, validation, Form.Item (uses field prop), Form.List, useForm hook |
| Input | input.md | Text input, Input.Password, Input.Search, Input.TextArea, prefix/suffix |
| Select | select.md | Dropdown select, multi-select, search, remote search, Select.Option, virtual scroll |
| DatePicker | date-picker.md | Date/range picker (RangePicker), week/month/quarter/year, disabled dates (dayjs) |
| TimePicker | time-picker.md | Time selection, range, 12h format, step intervals |
| InputNumber | input-number.md | Numeric input, stepper, precision, min/max |
| Checkbox | checkbox.md | Multi-select, Checkbox.Group, select all / indeterminate |
| Radio | radio.md | Single select, Radio.Group, button-style radio |
| Switch | switch.md | Toggle switch, loading, text labels (use triggerPropName="checked" in Form) |
| Slider | slider.md | Range slider, marks, vertical, step, tooltip format |
| Rate | rate.md | Star rating, half-star, readonly, custom characters |
| Cascader | cascader.md | Multi-level cascade (province/city), remote load, search |
| TreeSelect | tree-select.md | Select from tree structure, checkable, searchable, async load |
| Transfer | transfer.md | Transfer items between two lists, search, simple mode |
| AutoComplete | auto-complete.md | Input autocomplete, search suggestions |
| Mentions | mentions.md | @mention users/topics in text input |
| InputTag | input-tag.md | Tag input, add/remove tags, drag sort |
| Upload | upload.md | File upload, drag-and-drop, image upload with preview |
| ColorPicker | color-picker.md | Color selection (hex/rgb/hsl) |
| VerificationCode | verification-code.md | OTP / verification code input |
Data Display
| Component | File | Use for |
|---|---|---|
| Table | table.md | Data tables, sort, filter, pagination, fixed columns/header, virtual scroll, row selection, expandable rows |
| List | list.md | Data lists, paginated, virtual scroll, grid layout |
| Card | card.md | Card containers, cover, Card.Grid, Card.Meta, actions |
| Tree | tree.md | Tree structure, checkable, draggable, virtual scroll, async load |
| Tooltip | tooltip.md | Hover text hints (for rich content use Popover) |
| Popover | popover.md | Click/hover popup cards with rich content |
| Avatar | avatar.md | User avatars, avatar groups, image/text/icon avatars |
| Badge | badge.md | Numeric badges, status dots, count indicators |
| Tag | tag.md | Status tags, closable, Tag.CheckableTag, colored tags |
| Carousel | carousel.md | Image carousels, slideshows |
| Collapse | collapse.md | Collapsible panels, accordion mode, FAQ |
| Descriptions | descriptions.md | Key-value detail display, bordered, responsive columns |
| Calendar | calendar.md | Calendar view, event marking |
| Comment | comment.md | Comment display, nested replies, actions |
| Empty | empty.md | Empty state placeholder |
| Image | image.md | Image display, preview, lazy load, Image.PreviewGroup |
| Statistic | statistic.md | Numeric display, countdown, trend indicators |
| Timeline | timeline.md | Timelines, activity feeds, changelog |
Feedback
| Component | File | Use for |
|---|---|---|
| Modal | modal.md | Modal dialogs, Modal.confirm(), useModal hook, form-in-modal |
| Message | message.md | Global toast: Message.success(), error(), warning(), loading() |
| Notification | notification.md | Rich notification toasts with title + content + actions |
| Drawer | drawer.md | Slide-out side panels, form editing, nested drawers |
| Alert | alert.md | Inline alert banners (info/success/warning/error), banner mode |
| Progress | progress.md | Linear/circular progress bars, step progress |
| Popconfirm | popconfirm.md | Lightweight confirmation popup before delete/submit |
| Result | result.md | Result pages (success/fail/403/404/500) |
| Skeleton | skeleton.md | Loading skeleton placeholders with animation |
| Spin | spin.md | Loading spinner wrapping content |
Other
| Component | File | Use for |
|---|---|---|
| BackTop | back-top.md | Scroll-to-top button |
| Portal | portal.md | Render children into different DOM node |
| ResizeBox | resize-box.md | Resizable containers, split panes |
| Trigger | trigger.md | Base popup positioning (underlies Tooltip/Popover/Dropdown) |
| Watermark | watermark.md | Text/image watermarks over page content |
Patterns & Best Practices
| Topic | File | When to use |
|---|---|---|
| Form Patterns | form-patterns.md | Dynamic forms, linked validation, nested forms, async submit, complex layouts |
| Table Patterns | table-patterns.md | Remote data, editable rows, virtual scroll large data, custom filters |
| Modal Patterns | modal-patterns.md | Form-in-modal, confirmation flows, nested drawers, global messages |
| Controlled vs Uncontrolled | controlled-uncontrolled.md | Choosing value+onChange vs defaultValue pattern |
| Responsive Design | responsive-design.md | Grid breakpoints, adaptive layout, mobile-friendly design |
Hooks
Import from @arco-design/web-react/hooks. Use these headless hooks only when you need a fully custom UI — otherwise prefer the corresponding component.
| Hook | File | Use for |
|---|---|---|
| useVerificationCode | use-verification-code.md | Custom OTP input with focus, paste, keyboard navigation |
| useWatermark | use-watermark.md | Dynamic canvas watermark with tamper protection |