adobe/react-spectrum
React Spectrum
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.
Features
- React Components - Provides a collection of accessible, adaptive React components based on the Spectrum design system.
- Accessible Components - Provides a comprehensive library of accessible React components with native keyboard navigation and screen reader support.
- Accessibility State Management - Manages keyboard navigation and screen reader states through shared state controllers across component hierarchies.
- Design System Components - Implements a comprehensive library of accessible UI components adhering to the Spectrum design system guidelines.
- Design Token Mappings - Translates abstract design system values into concrete CSS properties based on the active theme and scale.
- Responsive Layout Scaling - Dynamically adjusts component sizes and touch targets to optimize the interface for both desktop and mobile.
- Theme Settings Configurations - Establishes a consistent visual foundation by configuring locale, color scheme, and fonts at the application root.
- Theme Providers - Distributes design tokens and visual themes through a React context provider to all descendant components.
- Theme Configuration Systems - Sets the global locale, color scheme, and design fonts for all components across the application.
- UI Component Libraries - Offers a library of design system components with bundled styles and a root provider for global theme support.
- UI Theming Frameworks - Provides a framework for building interfaces that dynamically switch between light, dark, and high-contrast themes.
- Runtime Theme Switchers - Allows users to toggle between light, dark, and high-contrast color schemes at runtime without reloading the application.
- React Development - Offers native keyboard navigation and screen reader support within the React development ecosystem.
- Tree-Shakeable Exports - Exports individual components as independent modules to let build tools remove unused code and styles.
- Tree-Shakable Feature Imports - Allows importing only specific referenced components to exclude unused styles and scripts from the final bundle.
- Tree-Shakable Architectures - Employs a modular structure that allows build tools to remove unused components and styles.
- Touch Target Scaling - Provides a responsive scale system that automatically optimizes touch targets for mobile and desktop contexts.
- Touch Target Optimizations - Provides a responsive scale system that automatically optimizes touch targets for mobile and desktop contexts.
- CSS-in-JS Implementations - Injects styles into the document head during execution to allow immediate updates to themes and scales.
- Theme Management - Controls which specific color themes and sizing scales are included in the build based on user preferences.
- Bundle Optimizers - Reduces the amount of JavaScript and CSS delivered to the client by importing only used components.
- UI Component Libraries - Adaptive, accessible, and robust React component library.
