shield_lock
JinDaGe
← Back to skills
extension
Category: Development & EngineeringNo API key required

arco-design

Arco Design React UI component library reference (@arco-design/web-react). Use this skill whenever the user asks to build a page, create a UI, write frontend code, develop a web application, design a dashboard, or implement any React interface — especially when they mention Arco, arco-design, @arco-design/web-react, or any Arco component name (Button, Table, Form, Modal, Select, Menu, etc.). Covers all 70 components with full API, code examples, import patterns, theming, i18n, layout, forms, tables, modals, navigation, data entry, data display, feedback, responsive design, and best practices.

personAuthor: jakexiaohubgithub
open_in_newRepositorydownloadDownload package

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.Sub pattern — Form.Item, Select.Option, Menu.SubMenu, Input.Search, Input.TextArea, Grid.Row, Grid.Col
  • Form.Item uses field prop (not name like 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 |