React Aria Components 是一个无样式、可访问的 UI 组件库,可以使用任意 CSS 方案进行样式定制。它构建在 React Aria hooks 之上,提供可访问性与交互行为,但不规定任何视觉设计。
用途 该技能用于帮助开发者使用 React Aria Components 构建可访问的 UI 组件。当开发者提到 React Aria、react-aria-components、可访问组件,或需要相关能力时适用。
主要能力 资料以 references/ 目录组织详细文档,分为指南、组件、交互、工具函数、国际化与测试等部分。
指南涵盖:集合(Collections)——许多组件展示项目集合,并提供键盘导航与选择等功能,介绍如何使用 React Aria 的组合式 API 加载和渲染集合;定制(Customization)——使用上下文与插槽创建自定义组件模式,或与更底层的 Hook 式 API 混用;拖放(Drag and Drop)——集合组件支持鼠标与触摸拖放,以及完整的键盘与屏幕阅读器可访问性;表单(Forms)——与 HTML 表单集成、验证和提交数据,以及与表单库配合使用;框架设置(Framework setup);入门(Getting started);质量(Quality)——围绕三项核心原则构建高质量 UI;选择(Selection)——处理选择事件、以编程方式控制选择及表示选择的数据结构;样式(Styling)——默认不包含任何样式,可使用任意样式方案构建自定义设计;测试(Testing)——使用测试工具模拟常见用户交互;与 AI 协作(Working with AI)——使用 React Aria MCP Server、Agent Skills 等。
组件包括:Autocomplete、Breadcrumbs、Button、Calendar、Checkbox、CheckboxGroup、ColorArea、ColorField、ColorPicker、ColorSlider、ColorSwatch、ColorSwatchPicker、ColorWheel、ComboBox、DateField、DatePicker、DateRangePicker、Disclosure、DisclosureGroup、DropZone、FileTrigger、Form、GridList、Group、Link、ListBox、Menu、Meter、Modal、NumberField、Popover、ProgressBar、RadioGroup、RangeCalendar、SearchField、Select、Separator、Slider、Switch、Table、Tabs、TagGroup、TextField、TimeField、Toast、ToggleButton、ToggleButtonGroup、Toolbar、Tooltip、Tree、Virtualizer。
交互部分包括:FocusRing、FocusScope、useClipboard、useDrag、useDrop、useFocus、useFocusRing、useFocusVisible、useFocusWithin、useHover、useKeyboard、useLandmark、useLongPress、useMove、usePress。
工具函数包括:I18nProvider、mergeProps、PortalProvider、SSRProvider、useCollator、useDateFormatter、useField、useFilter、useId、useIsSSR、useLabel、useLocale、useNumberFormatter、useObjectRef、VisuallyHidden。
国际化部分包括:Calendar、CalendarDate、CalendarDateTime、DateFormatter、Internationalized Date、Internationalized Number、NumberFormatter、NumberParser、Time、ZonedDateTime。
测试部分包括:Testing CheckboxGroup、Testing ComboBox、Testing GridList、Testing ListBox、Testing Menu、Testing RadioGroup、Testing Select、Testing Table、Testing Tabs、Testing Tree。
使用方式 资料未提供具体安装命令或代码示例,仅说明可通过 references/ 目录中的文档学习安装与构建第一个组件(Getting started),以及框架集成方式。
适用场景 适用于需要构建无样式、可访问 React UI 组件的开发场景,尤其是需要键盘导航、屏幕阅读器支持、拖放、表单集成、国际化与测试的界面。
限制 React Aria 默认不包含任何样式,需要自行使用样式方案实现视觉设计。资料未提供收费、价格、平台或效果等信息。