React Spectrum
A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
Projects
어도비의 디자인 시스템 Spectrum 을 React로 구현한 오픈소스
- react-spectrum : 테마지원, 마우스/터치/키보드 및 다국어를 고려한 컴포넌트를 제공하는 React 구현체
- react-aria : 접근성을 고려한 UI 기본요소를 제공하는 React Hook 라이브러리
- react-stately : 크로스 플랫폼 상태관리를 제공하는 React Hook 라이브러리
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 - 스펙트럼은 Adobe의 Design System 으로 별도로 정리된 페이지가 있습니다.
- Meet Spectrum, Adobe’s design system - 기존에 CSS만으로 스펙트럼 컴포넌트를 구현한 Spectrum CSS
- 디자인 시스템 1편 - 디자인 가이드/디자인 시스템은 왜 필요한가