Getting Started

This page describes how to get started building an application with React Spectrum.

What is React Spectrum?#

React Spectrum is a React implementation of Spectrum, Adobe's design system. It provides components that are adaptive to interactions and screen sizes across devices, and includes full screen reader and keyboard navigation support for accessibility.

Installation#

You can install React Spectrum package using a package manager like npm or yarn.

yarn add @adobe/react-spectrum

If you prefer, you can also install components from individually versioned packages. See the versioning docs for more details.

Build tooling#

React Spectrum works with most popular build tooling, like Parcel and create-react-app, or lower level tools like webpack.

The only requirement is CSS importing support. This is built into Parcel and create-react-app out of the box. If you're using React Spectrum with raw webpack, then you'll need to configure css-loader.

If your application is written in TypeScript, be sure to add @types/react and @types/react-dom to your project's dependencies as per React's type checking guide. React Spectrum components are published with their type definitions, so you can take advantage of static type checking, IDE autocomplete, and other TypeScript features.

Setting up your app#

All React Spectrum applications start with a Provider. The Provider specifies the theme to use, along with application level settings like the locale. Inside the Provider, you should render your application, including all React Spectrum components.

import {Provider} from '@react-spectrum/provider';
import {theme} from '@react-spectrum/theme-default';
import {Button} from '@react-spectrum/button';

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

import {Provider} from '@react-spectrum/provider';
import {theme} from '@react-spectrum/theme-default';
import {Button} from '@react-spectrum/button';

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

import {Provider} from '@react-spectrum/provider';
import {theme} from '@react-spectrum/theme-default';
import {Button} from '@react-spectrum/button';

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

See the Provider and Button docs for more information about the components used in this example.

Next steps#

Now that you've set up your app, you can read the documentation for the individual components to understand them in detail. We also have high level documentation about topics like theming, custom styling, layout, and testing.