重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
arco-design by arco-design/arco-design-skill
npx skills add https://github.com/arco-design/arco-design-skill --skill arco-design@arco-design/web-react — 字节跳动出品的企业级 React UI 组件库。
编写 Arco Design 代码时请始终遵循以下规则:
import { Button, Table, Form } from '@arco-design/web-react' — 始终从包根目录导入,切勿从子路径如 @arco-design/web-react/es/Button 导入import { IconSearch, IconPlus } from '@arco-design/web-react/icon'import type { TableProps, FormInstance } from '@arco-design/web-react'import '@arco-design/web-react/dist/css/arco.css' (完整) 或配置按需加载广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
value + onChange; 非受控 : defaultValueComponent.Sub 模式访问 — Form.Item, Select.Option, Menu.SubMenu, Input.Search, Input.TextArea, Grid.Row, Grid.Colfield 属性 (不像 Ant Design 那样使用 name)triggerPropName="checked"加载下方相关文件以获取完整的 API 参考、代码示例和最佳实践。
| 主题 | 文件 | 何时使用 |
|---|---|---|
| 安装 | getting-started.md | 安装 @arco-design/web-react,导入样式,配置 tree-shaking 或 babel-plugin-import |
| 全局配置 | config-provider.md | 通过 <ConfigProvider> 设置全局组件尺寸、主题、语言环境、默认属性 |
| 主题定制 | theming.md | 自定义主题颜色、CSS 变量覆盖、Less 变量、深色模式切换 |
| 国际化 | internationalization.md | 切换语言、添加语言包、自定义本地化文本 |
| 架构 | architecture.md | 理解受控/非受控模式、属性合并、ref 转发、CSS 命名 |
| 组件 | 文件 | 用途 |
|---|---|---|
| 按钮 | button.md | 按钮、按钮组、图标按钮、加载状态 |
| 图标 | icon.md | 内置图标 (IconXxx)、自定义 SVG 图标、IconFont |
| 排版 | typography.md | 标题、段落、文本省略、可复制/可编辑文本 |
| 链接 | link.md | 带图标的超链接、悬停状态 |
| 分割线 | divider.md | 水平/垂直分割线、带文本的分割线 |
| 组件 | 文件 | 用途 |
|---|---|---|
| 菜单 | menu.md | 侧边栏导航、顶部导航栏、子菜单、菜单组、可折叠 |
| 标签页 | tabs.md | 标签页切换、卡片式标签页、可编辑/可关闭标签页、额外内容 |
| 下拉菜单 | dropdown.md | 下拉菜单、上下文菜单、按钮下拉菜单 |
| 面包屑 | breadcrumb.md | 导航层级路径、路由面包屑 |
| 分页 | pagination.md | 页面导航、尺寸选择器、简洁/迷你模式 |
| 步骤条 | steps.md | 分步工作流、垂直/点状步骤、错误状态 |
| 固钉 | affix.md | 滚动时将元素固定在视口中 |
| 锚点 | anchor.md | 页面内锚点导航、滚动到指定区域 |
| 页头 | page-header.md | 页面标题 + 返回按钮 + 面包屑 + 操作项 |
| 组件 | 文件 | 用途 |
|---|---|---|
| 表单 | form.md | 表单构建、验证、Form.Item (使用 field 属性)、Form.List、useForm 钩子 |
| 输入框 | input.md | 文本输入框、Input.Password、Input.Search、Input.TextArea、前缀/后缀 |
| 选择器 | select.md | 下拉选择器、多选、搜索、远程搜索、Select.Option、虚拟滚动 |
| 日期选择器 | date-picker.md | 日期/范围选择器 (RangePicker)、周/月/季度/年、禁用日期 (dayjs) |
| 时间选择器 | time-picker.md | 时间选择、范围选择、12小时制、步进间隔 |
| 数字输入框 | input-number.md | 数字输入框、步进器、精度、最小值/最大值 |
| 复选框 | checkbox.md | 多选、Checkbox.Group、全选 / 半选 |
| 单选框 | radio.md | 单选、Radio.Group、按钮式单选框 |
| 开关 | switch.md | 切换开关、加载状态、文本标签 (在 Form 中使用 triggerPropName="checked") |
| 滑动输入条 | slider.md | 范围滑块、标记点、垂直方向、步进、工具提示格式 |
| 评分 | rate.md | 星级评分、半星、只读、自定义字符 |
| 级联选择器 | cascader.md | 多级级联选择 (省/市)、远程加载、搜索 |
| 树选择器 | tree-select.md | 从树结构中选择、可勾选、可搜索、异步加载 |
| 穿梭框 | transfer.md | 在两个列表间转移项目、搜索、简洁模式 |
| 自动完成 | auto-complete.md | 输入框自动完成、搜索建议 |
| 提及 | mentions.md | 在文本输入框中 @提及 用户/主题 |
| 标签输入框 | input-tag.md | 标签输入框、添加/移除标签、拖拽排序 |
| 上传 | upload.md | 文件上传、拖拽上传、带预览的图片上传 |
| 颜色选择器 | color-picker.md | 颜色选择 (hex/rgb/hsl) |
| 验证码 | verification-code.md | OTP / 验证码输入框 |
| 组件 | 文件 | 用途 |
|---|---|---|
| 表格 | table.md | 数据表格、排序、筛选、分页、固定列/表头、虚拟滚动、行选择、可展开行 |
| 列表 | list.md | 数据列表、分页、虚拟滚动、网格布局 |
| 卡片 | card.md | 卡片容器、封面、Card.Grid、Card.Meta、操作项 |
| 树 | tree.md | 树形结构、可勾选、可拖拽、虚拟滚动、异步加载 |
| 文字提示 | tooltip.md | 悬停文字提示 (富内容请使用 Popover) |
| 气泡卡片 | popover.md | 点击/悬停弹出富内容卡片 |
| 头像 | avatar.md | 用户头像、头像组、图片/文本/图标头像 |
| 徽标数 | badge.md | 数字徽标、状态点、计数指示器 |
| 标签 | tag.md | 状态标签、可关闭、Tag.CheckableTag、彩色标签 |
| 走马灯 | carousel.md | 图片轮播、幻灯片 |
| 折叠面板 | collapse.md | 可折叠面板、手风琴模式、常见问题解答 |
| 描述列表 | descriptions.md | 键值对详情展示、带边框、响应式列数 |
| 日历 | calendar.md | 日历视图、事件标记 |
| 评论 | comment.md | 评论展示、嵌套回复、操作项 |
| 空状态 | empty.md | 空状态占位符 |
| 图片 | image.md | 图片展示、预览、懒加载、Image.PreviewGroup |
| 统计数值 | statistic.md | 数值展示、倒计时、趋势指示器 |
| 时间轴 | timeline.md | 时间轴、活动流、变更日志 |
| 组件 | 文件 | 用途 |
|---|---|---|
| 模态框 | modal.md | 模态对话框、Modal.confirm()、useModal 钩子、表单内嵌模态框 |
| 全局提示 | message.md | 全局轻提示:Message.success()、error()、warning()、loading() |
| 通知提醒框 | notification.md | 带标题 + 内容 + 操作项的富通知提醒框 |
| 抽屉 | drawer.md | 侧滑面板、表单编辑、嵌套抽屉 |
| 警告提示 | alert.md | 内联警告横幅 (信息/成功/警告/错误)、横幅模式 |
| 进度条 | progress.md | 线性/环形进度条、步骤进度 |
| 气泡确认框 | popconfirm.md | 删除/提交前的轻量级确认气泡框 |
| 结果页 | result.md | 结果页面 (成功/失败/403/404/500) |
| 骨架屏 | skeleton.md | 带动画的加载骨架屏占位符 |
| 加载中 | spin.md | 包裹内容的加载旋转器 |
| 组件 | 文件 | 用途 |
|---|---|---|
| 回到顶部 | back-top.md | 滚动到顶部按钮 |
| 传送门 | portal.md | 将子节点渲染到不同的 DOM 节点 |
| 缩放框 | resize-box.md | 可调整大小的容器、分割面板 |
| 触发器 | trigger.md | 基础弹层定位 (Tooltip/Popover/Dropdown 的底层实现) |
| 水印 | watermark.md | 覆盖在页面内容上的文本/图片水印 |
| 主题 | 文件 | 何时使用 |
|---|---|---|
| 表单模式 | form-patterns.md | 动态表单、联动验证、嵌套表单、异步提交、复杂布局 |
| 表格模式 | table-patterns.md | 远程数据、可编辑行、虚拟滚动大数据量、自定义筛选器 |
| 模态框模式 | modal-patterns.md | 表单内嵌模态框、确认流程、嵌套抽屉、全局消息 |
| 受控与非受控 | controlled-uncontrolled.md | 选择 value+onChange 还是 defaultValue 模式 |
| 响应式设计 | responsive-design.md | 栅格断点、自适应布局、移动端友好设计 |
从 @arco-design/web-react/hooks 导入。仅当需要完全自定义 UI 时才使用这些无头钩子 — 否则请优先使用相应的组件。
| 钩子 | 文件 | 用途 |
|---|---|---|
| useVerificationCode | use-verification-code.md | 自定义 OTP 输入框,支持焦点、粘贴、键盘导航 |
| useWatermark | use-watermark.md | 动态画布水印,带防篡改保护 |
每周安装量
53
仓库
GitHub 星标数
12
首次出现
2026年2月25日
安全审计
已安装于
opencode51
gemini-cli50
amp50
github-copilot50
codex50
cursor50
@arco-design/web-react — An enterprise-level React UI component library by ByteDance.
Always follow these rules when writing Arco Design code:
import { Button, Table, Form } from '@arco-design/web-react' — always from the package root, never from sub-paths like @arco-design/web-react/es/Buttonimport { IconSearch, IconPlus } from '@arco-design/web-react/icon'import type { TableProps, FormInstance } from '@arco-design/web-react'import '@arco-design/web-react/dist/css/arco.css' (full) or configure on-demand loadingvalue + onChange; Uncontrolled : defaultValueComponent.Sub pattern — Form.Item, Select.Option, Menu.SubMenu, Input.Search, Input.TextArea, Grid.Row, Grid.Colfield prop (not name like Ant Design)triggerPropName="checked"Load the relevant file below for full API reference, code examples, and best practices.
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 pattern |
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 |
Weekly Installs
53
Repository
GitHub Stars
12
First Seen
Feb 25, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode51
gemini-cli50
amp50
github-copilot50
codex50
cursor50
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
125,600 周安装
| Architecture | architecture.md | Understand controlled/uncontrolled patterns, props merging, ref forwarding, CSS naming |
| Horizontal/vertical dividers, dividers with text |
| space.md |
| Consistent spacing between elements, horizontal/vertical, wrap |
| 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 |
| 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 |
| 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 |
| 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 |
defaultValue| Responsive Design | responsive-design.md | Grid breakpoints, adaptive layout, mobile-friendly design |