# Localisation

{% hint style="info" %}
Refer to the [server-side localization](https://docs.usegravity.app/gravity-server/localization) section to learn how to translate the server-side code.
{% endhint %}

## Locale Files

Locale files are stored inside the `/locales` folder, and each language has its own folder of `.json` files. The locales are split to match the same structure as the views.

All `.json` files inside each locale folder are imported and combined inside the index.js file inside each locale folder. You need to import all of your individual locale files into the index file.

```javascript
/locales
  /en
    en_dashboard.json
    en_nav.json
  /es
    es_dashboard.json
    es_nav.json
```

The locale files are simple JSON files containing the strings. The keys are always the same (in English) as these are referenced in the code. The string changes depending on the language.

```json
{
  "title": "Dashboard",
  "message": {
      "title": "Welcome to Gravity!",
      "text": "This is a sample dashboard to get you started. Please read the documentation to learn how to build your own features."
},
{
  "title": "Tablero de Control",
  "message": {
    "title": "¡Bienvenido a Gravity!",
    "text": "Este es un tablero de muestra para comenzar. Por favor, lea la documentación para aprender a construir sus propias características."
},
```

### Adding More Locales

{% hint style="info" %}
Pro tip – ask [ChatGPT](https://chat.openai.com/) to translate the JSON files to new languages.
{% endhint %}

1. Create a new folder inside the `/locales` file with the local name eg. `/fr` and add your JSON files.
2. Import the new locale file into the `index.js` file
3. Import the locale to `app.js` and add it to I18n config object.

```javascript
// locales
import en from '~/locales/en/index';
import es from '~/locales/es/index';
export const i18n = new I18n({ en, es });
```

## Performing Translations

Translations can be performed by importing the `i18n` package and using the t function.

```javascript
import { i18n } from 'components/lib'
import Style from './style.js';

export function Card(props){

return (  
  <div>
  
    <div className={ Style.title }>
     { i18n.t('account.card.title') }
    </div>
    
 </div>
}
```

## Switching Languages

There is a language switcher component in the drawer nav for changing the language. You can add more languages to the dropdown in `/components/locale`.&#x20;