# adobe/react-spectrum **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/adobe-react-spectrum).** 15,567 stars · 1,479 forks · TypeScript · Apache-2.0 ## Links - GitHub: https://github.com/adobe/react-spectrum - Homepage: https://react-spectrum.adobe.com - awesome-repositories: https://awesome-repositories.com/repository/adobe-react-spectrum.md ## Topics `accessibility` `design-systems` `react` `react-components` `ui-components` `wai-aria` ## Description This project is a design system component library and adaptive UI framework based on Adobe's Spectrum design system. It provides a collection of accessible React components designed to create consistent user experiences through a standardized set of adaptive and themeable interface elements. The framework features a responsive scale system that automatically optimizes touch targets and component sizing for mobile and desktop contexts. It is built as a tree-shakable library, allowing for the import of only the specific components used to minimize the final JavaScript and CSS bundle size. The system includes runtime theme management for switching between light, dark, and high-contrast color schemes, alongside global configuration for locales and fonts. It covers broad capability areas including native keyboard navigation and screen reader support for accessibility, and integration utilities for client-side routing. ## Tags ### User Interface & Experience - [React Components](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components.md) — Provides a collection of accessible, adaptive React components based on the Spectrum design system. - [Accessible Components](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components/accessible-components.md) — Provides a comprehensive library of accessible React components with native keyboard navigation and screen reader support. - [Design System Components](https://awesome-repositories.com/f/user-interface-experience/design-system-components.md) — Implements a comprehensive library of accessible UI components adhering to the Spectrum design system guidelines. - [Design Token Mappings](https://awesome-repositories.com/f/user-interface-experience/design-token-mappings.md) — Translates abstract design system values into concrete CSS properties based on the active theme and scale. - [Responsive Layout Scaling](https://awesome-repositories.com/f/user-interface-experience/responsive-layout-scaling.md) — Dynamically adjusts component sizes and touch targets to optimize the interface for both desktop and mobile. - [Theme Settings Configurations](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/theme-management/theme-development/theme-settings-configurations.md) — Establishes a consistent visual foundation by configuring locale, color scheme, and fonts at the application root. ([source](https://react-spectrum.adobe.com/getting-started)) - [Theme Providers](https://awesome-repositories.com/f/user-interface-experience/theme-providers.md) — Distributes design tokens and visual themes through a React context provider to all descendant components. - [Theme Configuration Systems](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-systems/theme-architecture-frameworks/theme-configuration-systems.md) — Sets the global locale, color scheme, and design fonts for all components across the application. ([source](https://react-spectrum.adobe.com/getting-started)) - [UI Component Libraries](https://awesome-repositories.com/f/user-interface-experience/ui-component-libraries.md) — Offers a library of design system components with bundled styles and a root provider for global theme support. ([source](https://cdn.jsdelivr.net/gh/adobe/react-spectrum@main/README.md)) - [UI Theming Frameworks](https://awesome-repositories.com/f/user-interface-experience/ui-theming-frameworks.md) — Provides a framework for building interfaces that dynamically switch between light, dark, and high-contrast themes. - [Runtime Theme Switchers](https://awesome-repositories.com/f/user-interface-experience/visual-styling-systems/runtime-theme-switchers.md) — Allows users to toggle between light, dark, and high-contrast color schemes at runtime without reloading the application. ([source](https://cdn.jsdelivr.net/gh/adobe/react-spectrum@main/README.md)) - [Touch Target Optimizations](https://awesome-repositories.com/f/user-interface-experience/input-handling/mobile-touch-handlers/touch-target-optimizations.md) — Provides a responsive scale system that automatically optimizes touch targets for mobile and desktop contexts. ([source](https://cdn.jsdelivr.net/gh/adobe/react-spectrum@main/README.md)) - [CSS-in-JS Implementations](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/css-in-js-implementations.md) — Injects styles into the document head during execution to allow immediate updates to themes and scales. - [Theme Management](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/theme-management.md) — Controls which specific color themes and sizing scales are included in the build based on user preferences. ([source](https://cdn.jsdelivr.net/gh/adobe/react-spectrum@main/README.md)) ### Software Engineering & Architecture - [Accessibility State Management](https://awesome-repositories.com/f/software-engineering-architecture/shared-state-management/component-context-sharing/accessibility-state-management.md) — Manages keyboard navigation and screen reader states through shared state controllers across component hierarchies. - [Tree-Shakable Feature Imports](https://awesome-repositories.com/f/software-engineering-architecture/modular-feature-architectures/tree-shakable-feature-imports.md) — Allows importing only specific referenced components to exclude unused styles and scripts from the final bundle. ([source](https://cdn.jsdelivr.net/gh/adobe/react-spectrum@main/README.md)) - [Tree-Shakable Architectures](https://awesome-repositories.com/f/software-engineering-architecture/tree-shakable-architectures.md) — Employs a modular structure that allows build tools to remove unused components and styles. ### Web Development - [React Development](https://awesome-repositories.com/f/web-development/react-development.md) — Offers native keyboard navigation and screen reader support within the React development ecosystem. - [Bundle Optimizers](https://awesome-repositories.com/f/web-development/bundle-optimizers.md) — Reduces the amount of JavaScript and CSS delivered to the client by importing only used components. ### Programming Languages & Runtimes - [Tree-Shakeable Exports](https://awesome-repositories.com/f/programming-languages-runtimes/language-ecosystems-tooling/module-management/module-systems/synchronous-module-loaders/module-interface-exports/tree-shakeable-exports.md) — Exports individual components as independent modules to let build tools remove unused code and styles. ### System Administration & Monitoring - [Touch Target Scaling](https://awesome-repositories.com/f/system-administration-monitoring/resolution-scaling-tools/touch-target-scaling.md) — Provides a responsive scale system that automatically optimizes touch targets for mobile and desktop contexts.