React Spectrum
lastmod 2020-07-31created 2020-07-312 edits
A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
Projects
An open-source React implementation of Adobe's design system, Spectrum
- react-spectrum: a React implementation providing components with theme support that account for mouse/touch/keyboard and internationalization
- react-aria: a React Hook library providing accessible UI primitives
- react-stately: a React Hook library providing cross-platform state management
Features
- Accessible
- Accessibility and behavior is implemented according to WAI-ARIA Authoring Practices, including full screen reader and keyboard navigation support. All components have been tested across a wide variety of screen readers and devices to ensure the best experience possible for all users.
- Adaptive
- All components are designed to work with mouse, touch, and keyboard interactions. They’re built with responsive design principles to deliver a great experience, no matter the device.
- International
- Support over 30 languages is included out of the box, including support for right-to-left languages, date and number formatting, and more.
- Customizable
- React Spectrum components support custom themes, and automatically adapt for dark mode. For even more customizability, you can build your own components with your own DOM structure and stying using the React Aria and React Stately hooks to provide behavior, accessibility, and interactions.
See also
Favorite site
- React Spectrum Libraries
- Github - react-spectrum
- Meet Spectrum CSS - Spectrum is Adobe's Design System, and it has its own dedicated page.
- Meet Spectrum, Adobe’s design system - Spectrum CSS, an earlier implementation of Spectrum components using CSS only
- Design Systems Part 1 - Why do we need design guides/design systems?