# Locale

URL: https://ark-ui.com/docs/utilities/locale
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/utilities/locale.mdx

Locale provider for setting the locale and direction of the app.

---

## Setup

The `LocaleProvider` component sets the locale for your app, formatting dates, numbers, and other locale-specific data.

> **Note:** If no `LocaleProvider` is setup, the default locale for the app will be `en-US` and therefore the direction
> will be `ltr`.

**Example: setup**

#### React

```tsx
import { LocaleProvider } from '@ark-ui/react/locale'

export const App = () => {
  return <LocaleProvider locale="de-DE">{/* Your App */}</LocaleProvider>
}

```

#### Solid

```tsx
import { LocaleProvider } from '@ark-ui/solid/locale'

export const App = () => {
  return <LocaleProvider locale="de-DE">{/* Your App */}</LocaleProvider>
}

```

#### Vue

```vue
<script setup lang="ts">
import { LocaleProvider } from '@ark-ui/vue/locale'
</script>

<template>
  <LocaleProvider locale="de-DE"><!-- Your App --></LocaleProvider>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { LocaleProvider } from '@ark-ui/svelte/locale'
</script>

<LocaleProvider locale="de-DE"><!-- Your App --></LocaleProvider>

```

## Usage

To access the current locale and direction settings, use the `useLocaleContext` hook.

**Example: usage**

#### React

```tsx
import { useLocaleContext } from '@ark-ui/react/locale'

export const Usage = () => {
  const { locale, dir } = useLocaleContext()

  return <pre>{JSON.stringify({ locale, dir }, null, 2)}</pre>
}

```

#### Solid

```tsx
import { useLocaleContext } from '@ark-ui/solid/locale'

export const Usage = () => {
  const locale = useLocaleContext()

  return <pre>{JSON.stringify(locale(), null, 2)}</pre>
}

```

#### Vue

```vue
<script setup lang="ts">
import { useLocaleContext } from '@ark-ui/vue/locale'

const locale = useLocaleContext()
</script>

<template>
  <pre>{{ JSON.stringify(locale, null, 2) }}</pre>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { useLocaleContext } from '@ark-ui/svelte/locale'

  const locale = useLocaleContext()
</script>

<pre>{JSON.stringify(locale(), null, 2)}</pre>

```

## API Reference

**Component API Reference**

#### React

**LocaleProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `locale` | `string` | Yes | The locale to use for the application. |


#### Solid

**LocaleProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `locale` | `string` | Yes | The locale to use for the application. |


#### Vue

**LocaleProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `locale` | `string` | Yes | The locale to use for the application. |


#### Svelte

**LocaleProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `locale` | `string` | Yes | The locale to use for the application. |