React Spectrum S2：Adobe官方React UI组件库，可访问、自适应、高质量

The Agent Skills Directory

234 周安装量

安装命令

npx skills add https://react-spectrum.adobe.com

UI组件库开发 React

🇨🇳中文介绍

React Spectrum S2 (Spectrum 2)

React Spectrum S2 是 Adobe 在 React 中对 Spectrum 2 设计系统的实现。它提供了一系列可访问、自适应且高质量的 UI 组件。

文档结构

references/ 目录包含按以下方式组织的详细文档：

指南

集合：许多组件用于显示项目集合，并提供键盘导航和选择等功能。了解如何使用 React Spectrum 的组合式 API 来加载和渲染集合。
表单：了解如何与 HTML 表单集成、验证和提交数据，以及如何将 React Spectrum 与表单库一起使用。
入门指南：## 安装
迁移到 Spectrum 2：了解如何从 React Spectrum v3 迁移到 Spectrum 2。
选择：许多集合组件支持通过点击或轻触项目，或使用键盘来选择项目。了解如何处理选择事件、如何以编程方式控制选择，以及用于表示选择的数据结构。
样式宏：该宏支持每个属性的一组受约束的值，这些值符合 Spectrum 2 规范。
样式：了解如何使用宏在组件中直接应用 Spectrum 设计令牌，并享受类型安全的自动补全。
与 AI 协作：了解如何使用 React Spectrum MCP 服务器、Agent Skills 等工具来帮助您利用 AI 进行构建。

组件

手风琴：手风琴是多个手风琴项的容器。
操作栏：当用户需要对一个或多个项目同时执行操作时，操作栏用于单次选择和批量选择模式。
操作按钮：操作按钮允许用户执行一个操作。
操作按钮组：操作按钮组是一组相关的操作按钮。
操作菜单：操作菜单将操作按钮与菜单结合，适用于简单的“更多操作”用例。
头像：头像是实体（例如用户或组织）的缩略图表示。
头像组：头像组是一组相互关联的头像。
徽章：徽章用于显示少量按颜色分类的元数据，非常适合吸引用户的注意力。
面包屑：面包屑显示了用户在应用程序中位置的层次结构和导航上下文。
按钮：按钮允许用户执行一个操作。
按钮组：按钮组处理一组相关操作按钮的溢出情况。
日历：日历显示一个或多个月份中的日期网格，并允许用户选择单个日期。

测试

每周安装量

170

来源

react-spectrum.adobe.com

首次出现

2026年2月28日

安全审计

SocketPass

安装于

cursor170

gemini-cli168

codex168

github-copilot168

opencode168

kimi-cli167

🇺🇸English

React Spectrum S2 (Spectrum 2)

React Spectrum S2 is Adobe's implementation of the Spectrum 2 design system in React. It provides a collection of accessible, adaptive, and high-quality UI components.

Documentation Structure

The references/ directory contains detailed documentation organized as follows:

Guides

Collections: Many components display a collection of items, and provide functionality such as keyboard navigation, and selection. Learn how to load and render collections using React Spectrum's compositional API.
Forms: Learn how to integrate with HTML forms, validate and submit data, and use React Spectrum with form libraries.
Getting started: ## Installation
Migrating to Spectrum 2: Learn how to migrate from React Spectrum v3 to Spectrum 2.
Selection: Many collection components support selecting items by clicking or tapping them, or by using the keyboard. Learn how to handle selection events, how to control selection programmatically, and the data structures used to represent a selection.
Style Macro: The macro supports a constrained set of values per property that conform to Spectrum 2.

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

find-skills 技能搜索工具 - Vercel Labs 开源智能体技能包管理器

867,400 周安装

Vercel React 最佳实践指南 | 58条Next.js性能优化规则与代码重构

283,600 周安装

Vercel Web界面规范检查工具 - 自动检测代码是否符合Web设计指南

228,700 周安装

agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试

157,400 周安装

卡片：卡片概括了用户可以选择或导航到的对象。

卡片视图：卡片视图显示一组相关对象，支持选择和批量操作。

复选框：复选框允许用户从单个项目列表中选择多个项目。

复选框组：复选框组允许用户从选项列表中选择一个或多个项目。

色彩区域：色彩区域允许用户在二维渐变背景上调整 RGB、HSL 或 HSB 颜色值的两个通道。

色彩字段：色彩字段允许用户编辑十六进制颜色或单个颜色通道值。

色彩滑块：色彩滑块允许用户调整颜色值的单个通道。

色彩样本：色彩样本显示所选颜色的预览。

色彩样本选择器：色彩样本选择器显示一个色彩样本列表，并允许用户选择其中一个。

色彩环：色彩环允许用户在圆形轨道上调整 HSL 或 HSB 颜色值的色调。

组合框：当空间有限时，组合框允许用户从可折叠的选项列表中选择单个选项。

上下文帮助：上下文帮助向用户显示有关相邻组件状态或整体视图的额外信息。

日期字段：日期字段允许用户使用键盘输入和编辑日期和时间值。

日期选择器：日期选择器结合了日期字段和日历弹出窗口，允许用户输入或选择日期和时间值。

日期范围选择器：日期范围选择器结合了两个日期字段和一个范围日历弹出窗口，允许用户

对话框：对话框是包含上下文信息、任务或工作流程的窗口，出现在用户界面上方。

披露：披露是一个可折叠的内容区域。它由一个包含标题和触发按钮的头部，以及一个包含内容的面板组成。

分割线：分割线通过对邻近内容进行分组和分隔，使布局更加清晰。

拖放区：拖放区是一个可以拖放一个或多个对象的区域。

表单：表单允许用户输入可以提交的数据，同时为表单字段提供对齐和样式。

图标：React Spectrum 提供了一组开源图标，可以从导入。

插图消息：插图消息显示一个插图和一条消息，通常

插图：React Spectrum 提供了一系列插图，可以从导入。

图像：一个支持骨架屏加载和自定义错误状态的图像组件。

内联警报：内联警报显示与视图中对象关联的非模态消息。

链接：链接允许用户导航到不同的位置。

链接按钮：链接按钮结合了链接的功能和按钮的外观。适用于允许用户导航到另一个页面。

列表视图：列表视图显示一个交互式项目列表，并允许用户导航、选择或执行操作。

菜单：菜单显示用户可以选择的操作或选项列表。

计量器：计量器是数量或成就的视觉表示。

数字字段：数字字段允许用户使用键盘输入数字值，或使用步进按钮递增/递减。

选择器：当空间有限时，选择器允许用户从可折叠的选项列表中选择单个选项。

弹出层：弹出层是一个相对于触发器定位的覆盖元素。

进度条：进度条以视觉方式显示系统操作的进度：下载、上传、处理等。

进度环：进度环以视觉方式显示系统操作（如下载、上传或处理）的进度。

提供者：提供者是所有 React Spectrum 组件的容器。

单选按钮组：单选按钮组允许用户从一组互斥的选项中选择一个选项。

范围日历：范围日历显示一个或多个月份中的日期网格，并允许用户选择一个连续的日期范围。

范围滑块：范围滑块允许用户快速选择一个子集范围。当范围的上限和下限不可变时应使用它。

搜索字段：搜索字段是专为搜索设计的文本字段。

分段控件：分段控件是一组用于视图切换的互斥按钮。

选择框组：选择框组允许用户从列表中选择一个或多个选项。

骨架屏：骨架屏包裹内容，将其渲染为占位符。

滑块：滑块允许用户快速在范围内选择一个值。当范围的上限和下限不可变时应使用它。

状态指示灯：状态指示灯用于对数据可视化中常见的类别和标签进行颜色编码。

开关：开关允许用户打开或关闭单个选项。

表格视图：表格是用于显示信息的容器。它们允许用户快速扫描、排序、比较大量数据并对其执行操作。

标签页：标签页将内容组织到多个部分，并允许用户在它们之间导航。标签页集合下的内容应该是相关的，并形成一个连贯的整体。

标签组：标签允许用户对内容进行分类。它们可以表示关键字或人员，并被分组以描述一个项目或搜索请求。

文本区域：文本区域允许用户输入多行文本。

文本字段：文本字段是文本输入框，允许用户输入自定义文本条目

时间字段：时间字段允许用户使用键盘输入和编辑时间值。

轻提示：ToastContainer 在应用程序中渲染排队的轻提示。它应该被放置在

切换按钮：切换按钮允许用户打开或关闭一个选择，例如

切换按钮组：切换按钮组是一组相关的切换按钮，支持单选或多选。

工具提示：工具提示内容的显示容器。根据其位置有一个方向箭头。

树视图：树视图为用户提供了一种导航嵌套层次结构信息的方式。

Styling: Learn how to use the macro to apply Spectrum tokens directly in your components with type-safe autocompletion.

Working with AI: Learn how to use the React Spectrum MCP Server, Agent Skills, and more to help you build with AI.

Accordion: An accordion is a container for multiple accordion items.
ActionBar: Action bars are used for single and bulk selection patterns when a user needs to perform actions on one or more items at the same time.
ActionButton: ActionButtons allow users to perform an action.
ActionButtonGroup: An ActionButtonGroup is a grouping of related ActionButtons.
ActionMenu: ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases.
Avatar: An avatar is a thumbnail representation of an entity, such as a user or an organization.
AvatarGroup: An avatar group is a grouping of avatars that are related to each other.
Badge: Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.
Breadcrumbs: Breadcrumbs show hierarchy and navigational context for a user's location within an application.
Button: Buttons allow users to perform an action.
ButtonGroup: ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.
Calendar: Calendars display a grid of days in one or more months and allow users to select a single date.
Card: A Card summarizes an object that a user can select or navigate to.
CardView: A CardView displays a group of related objects, with support for selection and bulk actions.
Checkbox: Checkboxes allow users to select multiple items from a list of individual items,
CheckboxGroup: A CheckboxGroup allows users to select one or more items from a list of choices.
ColorArea: A ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
ColorField: A color field allows users to edit a hex color or individual color channel value.
ColorSlider: A ColorSlider allows users to adjust an individual channel of a color value.
ColorSwatch: A ColorSwatch displays a preview of a selected color.
ColorSwatchPicker: A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
ColorWheel: A ColorWheel allows users to adjust the hue of an HSL or HSB color value on a circular track.
ComboBox: ComboBox allow users to choose a single option from a collapsible list of options when space is limited.
ContextualHelp: Contextual help shows a user extra information about the state of an adjacent component, or a total view.
DateField: DateFields allow users to enter and edit date and time values using a keyboard.
DatePicker: DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value.
DateRangePicker: DateRangePickers combine two DateFields and a RangeCalendar popover to allow users
Dialog: Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.
Disclosure: A disclosure is a collapsible section of content. It is composed of a header with a heading and trigger button, and a panel that contains the content.
Divider: Dividers bring clarity to a layout by grouping and dividing content in close proximity.
DropZone: A drop zone is an area into which one or multiple objects can be dragged and dropped.
Form: Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.
Icons: React Spectrum offers a set of open source icons that can be imported from .
IllustratedMessage: An IllustratedMessage displays an illustration and a message, usually
Illustrations: React Spectrum offers a collection of illustrations that can be imported from .
Image: An image with support for skeleton loading and custom error states.
InlineAlert: Inline alerts display a non-modal message associated with objects in a view.
Link: Links allow users to navigate to a different location.
LinkButton: A LinkButton combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.
ListView: A ListView displays a list of interactive items, and allows a user to navigate, select, or perform an action.
mcp
Menu: Menus display a list of actions or options that a user can choose.
Meter: Meters are visual representations of a quantity or an achievement.
NumberField: NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.
Picker: Pickers allow users to choose a single option from a collapsible list of options when space is limited.
Popover: A popover is an overlay element positioned relative to a trigger.
ProgressBar: ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.
ProgressCircle: ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.
Provider: Provider is the container for all React Spectrum components.
RadioGroup: Radio groups allow users to select a single option from a list of mutually exclusive options.
RangeCalendar: RangeCalendars display a grid of days in one or more months and allow users to select a contiguous range of dates.
RangeSlider: RangeSliders allow users to quickly select a subset range. They should be used when the upper and lower bounds to the range are invariable.
SearchField: A SearchField is a text field designed for searches.
SegmentedControl: A SegmentedControl is a mutually exclusive group of buttons used for view switching.
SelectBoxGroup: SelectBoxGroup allows users to select one or more options from a list.
Skeleton: A Skeleton wraps around content to render it as a placeholder.
Slider: Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.
StatusLight: Status lights are used to color code categories and labels commonly found in data visualization.
Switch: Switches allow users to turn an individual option on or off.
TableView: Tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data.
Tabs: Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.
TagGroup: Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request.
TextArea: A textarea allows a user to input mult-line text.
TextField: TextFields are text inputs that allow users to input custom text entries
TimeField: TimeFields allow users to enter and edit time values using a keyboard.
Toast: A ToastContainer renders the queued toasts in an application. It should be placed
ToggleButton: ToggleButtons allow users to toggle a selection on or off, for example
ToggleButtonGroup: A ToggleButtonGroup is a grouping of related ToggleButtons, with single or multiple selection.
Tooltip: Display container for Tooltip content. Has a directional arrow dependent on its placement.
TreeView: A tree view provides users with a way to navigate nested hierarchical information.

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

116,600 周安装

React Spectrum S2：Adobe官方React UI组件库，可访问、自适应、高质量

🇨🇳中文介绍

React Spectrum S2 (Spectrum 2)

文档结构

指南

组件

测试

🇺🇸English

React Spectrum S2 (Spectrum 2)

Documentation Structure

Guides

相关 Skills

Components

Testing

最新 Skills