# Provider Provider is the container for all React Spectrum components. It loads the font and sets the colorScheme, locale, and other application level settings. ```tsx 'use client'; import {Button, Provider} from '@react-spectrum/s2'; import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; ``` ## 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](https://www.ietf.org/rfc/bcp/bcp47.txt) language code. ```tsx ``` Supported Locales

Arabic (United Arab Emirates)
Bulgarian (Bulgaria)
Chinese (Simplified)
Chinese (Traditional)
Croatian (Croatia)
Czech (Czech Republic)
Danish (Denmark)
Dutch (Netherlands)
English (Great Britain)
English (United States)
Estonian (Estonia)
Finnish (Finland)
French (Canada)
French (France)
German (Germany)
Greek (Greece)
Hebrew (Israel)
Hungarian (Hungary)
Italian (Italy)
Japanese (Japan)
Korean (Korea)
Latvian (Latvia)
Lithuanian (Lithuania)
Norwegian (Norway)
Polish (Poland)
Portuguese (Brazil)
Romanian (Romania)
Russian (Russia)
Serbian (Serbia)
Slovakian (Slovakia)
Slovenian (Slovenia)
Spanish (Spain)
Swedish (Sweden)
Turkish (Turkey)
Ukrainian (Ukraine)

## 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. ```tsx let navigate = useNavigateFromYourRouter(); ``` ## Server side rendering When using SSR, the `` component can be rendered as the root `` element. The `locale` prop should always be specified to avoid hydration errors. ```tsx ``` ## API ### Provider | Name | Type | Default | Description | |------|------|---------|-------------| | `background` | `"base" | "layer-1" | "layer-2" | undefined` | — | The background for this provider. If not provided, the background is transparent. | | `children` | `ReactNode` | — | The content of the Provider. | | `colorScheme` | `ColorScheme | undefined` | — | The color scheme for your application. Defaults to operating system preferences. | | `elementType` | `keyof JSX.IntrinsicElements | undefined` | div | The DOM element to render. | | `locale` | `string | undefined` | 'en-US' | The locale for your application as a [BCP 47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code. Defaults to the browser/OS language setting. | | `router` | `Router | undefined` | — | Provides a client side router to all nested React Spectrum links to enable client side navigation. | | `styles` | `StyleString | undefined` | — | Spectrum-defined styles, returned by the `style()` macro. | | `UNSAFE_className` | `UnsafeClassName | undefined` | — | Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. | | `UNSAFE_style` | `CSSProperties | undefined` | — | Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. |