arco-design

name

arco-design

description

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.

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