adobe/react-spectrum

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.

Star history