Getting Started
This page describes how to get started building an application with 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.
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.
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.
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
{
Button
,
defaultTheme
,
Provider
}
from
'@adobe/react-spectrum'
;
function
App
(
)
{
return
(
<
Provider
theme
=
{
defaultTheme
}
>
<
Button
variant
=
"accent"
onPress
=
{
(
)
=>
alert
(
'Hey there!'
)
}
>
Hello React Spectrum!
<
/
Button
>
<
/
Provider
>
)
;
}
import
{
Button
,
defaultTheme
,
Provider
}
from
'@adobe/react-spectrum'
;
function
App
(
)
{
return
(
<
Provider
theme
=
{
defaultTheme
}
>
<
Button
variant
=
"accent"
onPress
=
{
(
)
=>
alert
(
'Hey there!'
)
}
>
Hello React Spectrum!
<
/
Button
>
<
/
Provider
>
)
;
}
import
{
Button
,
defaultTheme
,
Provider
}
from
'@adobe/react-spectrum'
;
function
App
(
)
{
return
(
<
Provider
theme
=
{
defaultTheme
}
>
<
Button
variant
=
"accent"
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.
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
.
