> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-agent-native-development.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Localization

> 19 built-in languages with support for custom translations, fallback languages, and date/time formatting.

<Accordion title="AI Integration Quick Reference">
  | Field | Value |
  | - | - |
  | Locale prop | `locale="fr"` on `CometChatProvider` |
  | Default | `en-us` |
  | Languages | 19 built-in: de, en-gb, en-us, es, fr, hi, hu, it, ja, ko, lt, ms, nl, pt, ru, sv, tr, zh, zh-tw |
  | Hook | `useLocale()` → `{ getLocalizedString, language }` |
  | Static access | `CometChatLocalize.getSharedInstance()?.t(key)` |
  | Custom translations | Pass via `CometChatLocalize` constructor or `addTranslation()` |
</Accordion>

## Overview

The UI Kit ships with translations for 19 languages. All user-facing text (button labels, status messages, timestamps, error messages) is resolved through translation keys. Set the `locale` prop on `CometChatProvider` to switch languages.

***

## Setting the Language

```tsx theme={null}
<CometChatProvider locale="fr">
  <MyChatApp />
</CometChatProvider>
```

***

## Supported Languages

| Code | Language |
| - | - |
| `en-us` | English (US) — default |
| `en-gb` | English (UK) |
| `de` | German |
| `es` | Spanish |
| `fr` | French |
| `hi` | Hindi |
| `hu` | Hungarian |
| `it` | Italian |
| `ja` | Japanese |
| `ko` | Korean |
| `lt` | Lithuanian |
| `ms` | Malay |
| `nl` | Dutch |
| `pt` | Portuguese |
| `ru` | Russian |
| `sv` | Swedish |
| `tr` | Turkish |
| `zh` | Chinese (Simplified) |
| `zh-tw` | Chinese (Traditional) |

***

## Accessing Translations in Components

Use the `useLocale` hook:

```tsx theme={null}
import { useLocale } from "@cometchat/chat-uikit-react";

function MyComponent() {
  const { getLocalizedString, language } = useLocale();

  return <p>{getLocalizedString("message_deleted")}</p>;
  // Renders: "This message was deleted" (en-us)
  // Renders: "Ce message a été supprimé" (fr)
}
```

***

## Adding Custom Translations

Override or add translation keys for a language:

```tsx theme={null}
import { CometChatLocalize } from "@cometchat/chat-uikit-react";

const localize = CometChatLocalize.getSharedInstance();
localize?.addTranslation("en-us", {
  "custom_greeting": "Welcome to our chat!",
  "message_deleted": "Message removed",  // Override built-in key
});
```

***

## Fallback Language

If a key is not found in the current language, the system falls back to the fallback language (default: `en-us`). Configure via `CometChatLocalize`:

```tsx theme={null}
const localize = new CometChatLocalize({
  language: "fr",
  fallbackLanguage: "en-us",
});
```

***

## Date & Time Localization

Date formatting respects the locale. The `CometChatDate` component and all timestamp displays use locale-aware formatting:

* Relative time: "2 minutes ago", "il y a 2 minutes"
* Day names: "Monday", "Lundi"
* Date formats: "12/25/2024" (en-us), "25/12/2024" (en-gb)

***

## Static Access (Non-React Code)

For plugins and utilities that run outside React components:

```tsx theme={null}
import { CometChatLocalize } from "@cometchat/chat-uikit-react";

const t = CometChatLocalize.getSharedInstance()?.t;
const text = t?.("message_deleted") ?? "This message was deleted";
```

***

## Differences from v6

| v6 | v7 |
| - | - |
| `CometChatLocalize.setLanguage("fr")` | `locale="fr"` prop on `CometChatProvider` |
| Global static state | React context via provider |
| Manual init required | Provider handles locale context |
| Same 19 languages | Same 19 languages |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.