Provider

Provider is the container for all React Spectrum components. It loads the font and sets the colorScheme, locale, and other application level settings.

Example

import {Provider} from '@react-spectrum/s2';
import {Button} from '@react-spectrum/s2';

function App() {
  return (
    <Provider background='base'>
      <Button variant="accent">
        Hello React Spectrum!
      </Button>
    </Provider>
  );
}

Color Schemes

By default, React Spectrum follows the operating system color scheme setting, supporting both light and dark mode. The colorScheme prop can be set on <Provider> to force the app to always render in a certain color scheme.

import {Provider} from '@react-spectrum/s2';
import {ActionButton} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<div className={style({display: 'flex', gap: 12})}>
  <Provider colorScheme="light">
    <div className={style({backgroundColor: 'base', padding: 12})}>
      <ActionButton>I'm a light button</ActionButton>
    </div>
  </Provider>
  <Provider colorScheme="dark">
    <div className={style({backgroundColor: 'elevated', padding: 12})}>
      <ActionButton>I'm a dark button</ActionButton>
    </div>
  </Provider>
</div>

Locales

By default, React Spectrum chooses the locale matching the user’s browser/operating system language, but this can be overridden with the locale prop if you have an application specific setting. This prop accepts a BCP 47 language code. A list of supported locales is available here

<Provider locale="en-US">
  <YourApp />
</Provider>

Client side routing

The Provider component accepts an optional router prop. This enables React Spectrum components that render links to perform client side navigation using your application or framework's client side router. See the client side routing guide for details on how to set this up.

let navigate = useNavigateFromYourRouter();

<Provider router={{navigate}}>
  <YourApp />
</Provider>

Server side rendering

When using SSR, the <Provider> component can be rendered as the root <html> element. The locale prop should always be specified to avoid hydration errors.

<Provider elementType="html" locale="en-US">
  <YourApp />
</Provider>

Props

Name	Type	Default
`children`	`ReactNode`	Default: —
The content of the Provider.
`locale`	`string`	Default: `'en-US'`
The locale for your application as a BCP 47 language code. Defaults to the browser/OS language setting.
`router`	`Router`	Default: —
Provides a client side router to all nested React Spectrum links to enable client side navigation.
`colorScheme`	`ColorScheme`	Default: —
The color scheme for your application. Defaults to operating system preferences.
`background`	`'base' \| 'layer-1' \| 'layer-2'`	Default: —
The background for this provider. If not provided, the background is transparent.
`styles`	`StyleString`	Default: —
Spectrum-defined styles, returned by the `style()` macro.
`elementType`	`keyof JSX.IntrinsicElements`	Default: `div`
The DOM element to render.