@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.