# Multi Language

Berry supports four languages ('en' - English, 'fr' - French, 'ro' - Romanian, 'zh' - Chinese) and can be easily switched from the header bar. The main menu is also internationalized for all four languages. If you wish to add an additional language or set a default language, please continue reading below\...

## How does it work?

Data for locale files exist at **`src\utils\locales`**

{% code title=".json file" %}

```javascript
{
    "dashboard": "Dashboard",
    "default": "Default",
    "analytics": "Analytics",
    ...
    ...
}
```

{% endcode %}

To change Locale, open file **`src\config.js`** file and set language

{% tabs %}
{% tab title="JavaScript" %}
{% code title="config.js" %}

```javascript
const config = {
    ...
    i18n: 'en', // 'en' - English, 'fr' - French, 'ro' - Romanian, 'zh' - Chinese
    ...
}
```

{% endcode %}
{% endtab %}

{% tab title="TypeScript" %}

```typescript
import { PaletteMode } from '@material-ui/core';

const config: {
    ...
    i18n: string;
    ...    
    };
} = {
    ...
    // 'en' - English, 'fr' - French, 'ro' - Romanian, 'zh' - Chinese
    i18n: 'en',
    ...
};

export default config;
```

{% endtab %}
{% endtabs %}

Open file **`App.jsx`** and apply **IntlProvider**

{% tabs %}
{% tab title="JavaScript" %}
{% code title="App.jsx" %}

```javascript
import { RouterProvider } from 'react-router-dom';

// routing
import router from 'routes';

// project imports
import Locales from 'ui-component/Locales';
import NavigationScroll from 'layout/NavigationScroll';
import RTLLayout from 'ui-component/RTLLayout';
import Snackbar from 'ui-component/extended/Snackbar';
import Notistack from 'ui-component/third-party/Notistack';

import ThemeCustomization from 'themes';

// auth provider
import { JWTProvider as AuthProvider } from 'contexts/JWTContext';
// import { FirebaseProvider as AuthProvider } from 'contexts/FirebaseContext';
// import { AWSCognitoProvider as AuthProvider } from 'contexts/AWSCognitoContext';
// import { Auth0Provider as AuthProvider } from 'contexts/Auth0Context';

// ==============================|| APP ||============================== //

const App = () => {
    return (
        <ThemeCustomization>
            <RTLLayout>
                <Locales>
                    <NavigationScroll>
                        <AuthProvider>
                            <>
                                <Notistack>
                                    <RouterProvider router={router} />
                                    <Snackbar />
                                </Notistack>
                            </>
                        </AuthProvider>
                    </NavigationScroll>
                </Locales>
            </RTLLayout>
        </ThemeCustomization>
    );
};

export default App;
```

{% endcode %}
{% endtab %}

{% tab title="TypeScript" %}
{% code title="App.tsx" %}

```typescript
import { RouterProvider } from 'react-router-dom';

// routing
import router from 'routes';

// project imports
import Locales from 'ui-component/Locales';
import NavigationScroll from 'layout/NavigationScroll';
import RTLLayout from 'ui-component/RTLLayout';
import Snackbar from 'ui-component/extended/Snackbar';
import Notistack from 'ui-component/third-party/Notistack';

import ThemeCustomization from 'themes';

// auth provider
import { JWTProvider as AuthProvider } from 'contexts/JWTContext';
// import { FirebaseProvider as AuthProvider } from 'contexts/FirebaseContext';
// import { AWSCognitoProvider as AuthProvider } from 'contexts/AWSCognitoContext';
// import { Auth0Provider as AuthProvider } from 'contexts/Auth0Context';

// ==============================|| APP ||============================== //

const App = () => {
    return (
        <ThemeCustomization>
            <RTLLayout>
                <Locales>
                    <NavigationScroll>
                        <AuthProvider>
                            <>
                                <Notistack>
                                    <RouterProvider router={router} />
                                    <Snackbar />
                                </Notistack>
                            </>
                        </AuthProvider>
                    </NavigationScroll>
                </Locales>
            </RTLLayout>
        </ThemeCustomization>
    );
};

export default App;
```

{% endcode %}
{% endtab %}
{% endtabs %}

## For Remix

Open file **`Root.tsx`** and apply **IntlProvider**

{% tabs %}
{% tab title="TypeScript" %}
{% code title="Root.tsx" %}

```typescript
// project imports
import ThemeCustomization from 'themes';
import Locales from 'ui-component/Locales';
...
...

// ==============================|| APP ||============================== //

export default function App() {
    return (
        ...
            <Index />
        ...
    );
}

export const Index = () => {
    return (
        <ThemeCustomization>
            ...
                <Locales>
                    ...
                </Locales>
            ...
        </ThemeCustomization>
      );
};
```

{% endcode %}
{% endtab %}
{% endtabs %}