16K ·GitHub
What is this?
Adobe's open-source collection of libraries and tools for building adaptive, accessible, and robust user experiences with React.
Adobe's open-source collection of libraries and tools for building adaptive, accessible, and robust user experiences with React.Is this one component library or several?A collection of separate libraries: React Spectrum (Adobe's design system as ready-made React components), React Aria (unstyled accessible components and hooks), and React Stately (state management hooks).
A collection of separate libraries: React Spectrum (Adobe's design system as ready-made React components), React Aria (unstyled accessible components and hooks), and React Stately (state management hooks).How do I start using it in my app?Pick a library for your use case and install it from npm: React Spectrum for a complete styled component library, React Aria if you're building your own components with your own styling.
Pick a library for your use case and install it from npm: React Spectrum for a complete styled component library, React Aria if you're building your own components with your own styling.Do I need anything besides React?Just React — the libraries are consumed as npm packages. A repo script also preps compatibility with legacy React 16.8 environments.
Just React — the libraries are consumed as npm packages. A repo script also preps compatibility with legacy React 16.8 environments.Does React Spectrum lock me into Adobe's visual style?React Spectrum ships Adobe's Spectrum design system look, so adopting it means adopting that visual style. For full control over styling and DOM structure, build with the unstyled React Aria hooks instead.
React Spectrum ships Adobe's Spectrum design system look, so adopting it means adopting that visual style. For full control over styling and DOM structure, build with the unstyled React Aria hooks instead.What makes the components accessible?Behavior follows WAI-ARIA Authoring Practices with full screen reader and keyboard navigation support, and components are tested across a wide variety of screen readers and devices.
Behavior follows WAI-ARIA Authoring Practices with full screen reader and keyboard navigation support, and components are tested across a wide variety of screen readers and devices.Does it handle internationalization out of the box?Yes — support for over 30 languages is included, including right-to-left languages, date and number formatting. There are also separate framework-agnostic i18n libraries.
Yes — support for over 30 languages is included, including right-to-left languages, date and number formatting. There are also separate framework-agnostic i18n libraries.Can I theme the components or get dark mode?React Spectrum components support custom themes and automatically adapt for dark mode. For deeper customization you can build your own components with the React Aria and React Stately hooks.
React Spectrum components support custom themes and automatically adapt for dark mode. For deeper customization you can build your own components with the React Aria and React Stately hooks.Why did Adobe build this?The stated goal is to make building design systems and component libraries as easy as possible while maintaining high-quality interactions and accessibility — to raise the bar for web applications.
The stated goal is to make building design systems and component libraries as easy as possible while maintaining high-quality interactions and accessibility — to raise the bar for web applications.What are similar projects?base-ui, chakra-ui, arc-library, primitives, Libraries.dev, astryx, kumo, vant
base-ui, chakra-ui, arc-library, primitives, Libraries.dev, astryx, kumo, vantWhich topics is it in?wai-aria, internationalization, design-systems, react-components, hooks, responsive, ui-library, state-management, dark-mode, accessibility, component-library, i18n
wai-aria, internationalization, design-systems, react-components, hooks, responsive, ui-library, state-management, dark-mode, accessibility, component-library, i18n