@adobe/react-spectrum

React Spectrum

A React implementation of Spectrum, Adobe’s design system.

Features

• ♿️ Accessible – React Spectrum components are designed with accessibility top-of-mind and include full screen reader and keyboard navigation support.
• 📱 Adaptive – React Spectrum 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 – React Spectrum components are designed to support over 30 languages, including support for right-to-left languages, date and number formatting, and more.
• 🎨 Customizable theming – React Spectrum supports custom themes to match your brand, including automatic support for dark mode.

Getting started

The easiest way to start building a React Spectrum application is by following our getting started guide. It walks through all of the steps needed to install the components from npm, set up build tooling, and create your first application.

Example

Here is a very basic example of using React Spectrum.

import {Provider, defaultTheme, Button} from '@adobe/react-spectrum';

// Render it in your app!
function App() {
  return (
    <Provider theme={theme}>
      <Button
        variant="cta"
        onPress={() => alert('Hey there!')}>
        Hello React Spectrum!
      </Button>
    </Provider>
  );
}

Learn more

React Spectrum is part of a family of libraries that help you build adaptive, accessible, and robust user experiences. Learn more about React Aria and React Stately if you'd like to build your own component library from scratch on our website.

Similar packages

Other packages similar to @adobe/react-spectrum

material-ui

Material-UI is a popular React UI framework that implements Google's Material Design. It offers a wide range of components and customization options. Compared to @adobe/react-spectrum, Material-UI is more widely used and has a larger community, but it may not align with Adobe's design principles.

chakra-ui

Chakra UI is a simple, modular, and accessible component library for React. It focuses on ease of use and flexibility, providing a set of accessible components with a consistent design. While it offers similar functionalities to @adobe/react-spectrum, it emphasizes simplicity and developer experience.

ant-design

Ant Design is a comprehensive design system and React UI library developed by Alibaba. It provides a wide range of components and design patterns. Ant Design is known for its enterprise-level features and extensive documentation, making it a strong alternative to @adobe/react-spectrum for large-scale applications.