# UI: UiProvider

> Sets the locale of the components and their own texts.

Source: https://pithyx.org/docs/reference/sdk/ui/ui-provider/
Markdown: https://pithyx.org/docs/reference/sdk/ui/ui-provider.md

Sets the locale of the components and their own texts. Import the token file once (`@pithyx/ui/tokens.css`) and wrap the app in `UiProvider`; see [@pithyx/ui](https://pithyx.org/docs/sdk/ui/).

Generated from the TSDoc comments of @pithyx/ui 1.0.0-rc.9 at build time; the text below the headings is the comment in the source.

## Interfaces

### UiProviderProps

The props of [UiProvider](#uiprovider).

#### Properties

##### locale

```ts
locale: string;
```

A BCP 47 tag such as `de-AT`. Dates and numbers follow it; the texts follow its language.

##### children

```ts
children: ReactNode;
```

The app, or the part of it that uses the locale.

## Functions

### UiProvider()

```ts
function UiProvider(props): Element;
```

Sets the language of the components below it: React Aria's formatting and announcements, and the package's own
texts (English and German; English for any other language). Without it, both follow the browser.

#### Parameters

| Parameter | Type                                  | Description                             |
| --------- | ------------------------------------- | --------------------------------------- |
| `props`   | [`UiProviderProps`](#uiproviderprops) | The locale and the components below it. |

#### Returns

`Element`

React Aria's `I18nProvider` with the locale.

#### Example

```tsx
<UiProvider locale={app.context.locale}>
  <App />
</UiProvider>
```