React Spectrum components

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.

Components: 181
Framework: React
Stack: React, TypeScript, Tailwind, CSS
License: Apache-2.0
GitHub stars: 15,921
Source: https://github.com/adobe/react-spectrum
Website: https://react-spectrum.adobe.com

All React Spectrum components

Accordion: A group of disclosures that can be expanded and collapsed.
Action Bar: 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.
Action Button: ActionButtons allow users to perform an action. They’re used for similar, task-based options within a workflow, and are ideal for…
Action Button Group: An ActionButtonGroup is a grouping of related ActionButtons.
Action Menu: ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases.
Alert Dialog: AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.
Avatar: An avatar is a thumbnail representation of an entity, such as a user or an organization.
Avatar Group: 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 or to navigate to another page. They have multiple styles for various needs, and are ideal for…
Button Group: 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.
Card View: TODO: Add description of component here.
Checkbox: Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.
Checkbox Group: A CheckboxGroup allows users to select one or more items from a list of choices.
Coach Mark
Color Area: ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
Color Field: A color field allows users to edit a hex color or individual color channel value.
Color Slider: ColorSliders allow users to adjust an individual channel of a color value.
Color Swatch: A ColorSwatch displays a preview of a selected color.
Color Swatch Picker: A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
Color Wheel: ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
Combo Box: ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query.
Contextual Help: Contextual help shows a user extra information about the state of an adjacent component, or a total view.
Custom Dialog: A CustomDialog is a floating window with a custom layout.
Date Field: DateFields allow users to enter and edit date and time values using a keyboard. Each part of a date value is displayed in an individually…
Date Picker: DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value.
Date Range Picker: DateRangePickers combine two DateFields and a RangeCalendar popover to allow users to enter or select a date and time range.
Dialog: Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface. Depending on the kind of…
Disclosure: A collapsible section of content composed of a heading that expands and collapses a panel.
Divider: Dividers bring clarity to a layout by grouping and dividing content in close proximity. They can also be used to establish rhythm and…
Drop Zone: 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.
Fullscreen Dialog: Takeover dialogs are large types of dialogs. They use the totality of the screen and should be used for modal experiences with complex…
Icon: Spectrum icons are clear, minimal, and consistent across platforms. They follow the focused and rational principles of the design system…
Illustrated Message: An IllustratedMessage displays an illustration and a message, usually for an empty state or an error page.
Inline Alert: Inline alerts display a non-modal message associated with objects in a view. These are often used in form validation, providing a place to…
Labeled Value: A LabeledValue displays a non-editable value with a label. It formats numbers, dates, times, and lists according to the user's locale.
Link: Links allow users to navigate to a different location. They can be presented inline inside a paragraph or as standalone text.
Link Button: A LinkButton combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.
List View: A ListView displays a list of interactive items, and allows a user to navigate, select, or perform an action.
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. Their progress is determined by user actions, rather than system actions.
Notification Badge: Notification badges are used to indicate new or pending activity .
Number Field: NumberFields allow users to enter a number, and increment or decrement the value using stepper 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.
Progress Bar: ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way. They can represent…
Progress Circle: ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way. They can…
Radio Group: Radio groups allow users to select a single option from a list of mutually exclusive options. All possible options are exposed up front…
Range Calendar: RangeCalendars display a grid of days in one or more months and allow users to select a contiguous range of dates.
Range Slider: RangeSliders allow users to quickly select a subset range. They should be used when the upper and lower bounds to the range are invariable.
Search Field: A SearchField is a text field designed for searches.
Segmented Control: A SegmentedControl is a mutually exclusive group of buttons used for view switching.
Select Box Group: SelectBoxGroup allows users to select one or more options from a list.
Side Nav: A SideNav provides users with a way to navigate nested hierarchical set of links.
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…
Status Light: Status lights are used to color code categories and labels commonly found in data visualization. When status lights have a semantic…
Switch: Switches allow users to turn an individual option on or off. They are usually used to activate or deactivate a specific setting.
Table View: 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…
Tag Group: Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request.
Text Field: TextFields are text inputs that allow users to input custom text entries with a keyboard. Various decorations can be displayed around the…
Time Field: TimeFields allow users to enter and edit time values using a keyboard. Each part of the time is displayed in an individually editable…
Toast
Toggle Button: ToggleButtons allow users to toggle a selection on or off, for example switching between two states or modes.
Toggle Button Group: 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.
Tree View: A tree view provides users with a way to navigate nested hierarchical information.
Ai Aibutton
Ai Alert
Ai Attachment Grid
Ai Attachment List
Ai Chat
Ai Message Feedback
Ai Message Source
Ai Message Suggestion
Ai Prompt Field
Ai Response Status
Ai User Message
Tailwind Alert Dialog
Tailwind Breadcrumbs
Tailwind Button
Tailwind Calendar
Tailwind Checkbox
Tailwind Checkbox Group
Tailwind Color Area
Tailwind Color Field
Tailwind Color Picker
Tailwind Color Slider
Tailwind Color Swatch
Tailwind Color Swatch Picker
Tailwind Color Wheel
Tailwind Combo Box
Tailwind Command Palette
Tailwind Date Field
Tailwind Date Picker
Tailwind Date Range Picker
Tailwind Disclosure
Tailwind Disclosure Group
Tailwind Form
Tailwind Grid List
Tailwind Link
Tailwind List Box
Tailwind Menu
Tailwind Meter
Tailwind Navigation Tree
Tailwind Number Field
Tailwind Popover
Tailwind Progress Bar
Tailwind Radio Group
Tailwind Range Calendar
Tailwind Search Field
Tailwind Select
Tailwind Sheet
Tailwind Slider
Tailwind Switch
Tailwind Table
Tailwind Tabs
Tailwind Tag Group
Tailwind Text Field
Tailwind Time Field
Tailwind Toast
Tailwind Toggle Button
Tailwind Toggle Button Group
Tailwind Token Field
Tailwind Toolbar
Tailwind Tooltip
Tailwind Tree
Vanilla Breadcrumbs
Vanilla Button
Vanilla Calendar
Vanilla Checkbox
Vanilla Checkbox Group
Vanilla Color Area
Vanilla Color Field
Vanilla Color Picker
Vanilla Color Slider
Vanilla Color Swatch
Vanilla Color Swatch Picker
Vanilla Color Wheel
Vanilla Combo Box
Vanilla Command Palette
Vanilla Date Field
Vanilla Date Picker
Vanilla Date Range Picker
Vanilla Dialog
Vanilla Disclosure
Vanilla Disclosure Group
Vanilla Form
Vanilla Grid List
Vanilla Link
Vanilla List Box
Vanilla Menu
Vanilla Meter
Vanilla Modal
Vanilla Navigation Tree
Vanilla Number Field
Vanilla Popover
Vanilla Progress Bar
Vanilla Radio Group
Vanilla Range Calendar
Vanilla Search Field
Vanilla Select
Vanilla Sheet
Vanilla Slider
Vanilla Switch
Vanilla Table
Vanilla Tabs
Vanilla Tag Group
Vanilla Text Field
Vanilla Time Field
Vanilla Toast
Vanilla Toggle Button
Vanilla Toggle Button Group
Vanilla Token Field
Vanilla Toolbar
Vanilla Tooltip
Vanilla Tree

React Spectrum components

All React Spectrum components

Browse by category