Locale

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.

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

export const App = () => {
  return (
    <LocaleProvider locale="de-DE" supportedLocales={['en-US', 'es-ES', 'fr-FR', 'de-DE', 'ar-SA', 'he-IL', 'ja-JP']}>
      {/* Your App */}
    </LocaleProvider>
  )
}

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

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

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

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

<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.

import { useLocaleContext } from '@ark-ui/react/locale'
import { Format } from '@ark-ui/react/format'

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

  return (
    <div dir={dir}>
      <h2>Locale Demonstration</h2>

      <div>
        <label htmlFor="locale-select">Select Language: </label>
        <select id="locale-select" value={locale} onChange={(e) => setLocale(e.target.value)}>
          {supportedLocales?.map((loc) => (
            <option key={loc} value={loc}>
              {loc}
            </option>
          ))}
        </select>
      </div>
      <p>
        <Format.Byte value={1024.32} /> bytes in {locale} locale.
      </p>
      <p>
        <Format.RelativeTime value={new Date('2025-12-12')} /> from now in {locale} locale.
      </p>
    </div>
  )
}

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

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

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

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

const locale = useLocaleContext()
</script>

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

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

  const locale = useLocaleContext()
</script>

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

API Reference

LocaleProvider

Prop	Default	Type
`locale`	`'en-US'`	`string` The locale to use for the application.