Internationalization

Overview

Internationalization is the process of structuring code and user interfaces to be localized. Yamada UI supports various localizations in many components, from built-in string translations to date and number formats. By using Yamada UI's components, these internationalizations are automatically handled.

Localization

Localization is the process of adapting an application to a specific language or region. It includes adjustments such as text translations, date and number formats, and text search. Yamada UI supports localization in over 30 locales.

Change the Locale

To change the locale, set a value for locale.

import { UIProvider } from "@yamada-ui/react"

const App = () => {
  return (
    <UIProvider locale="ja-JP">
      <App />
    </UIProvider>
  )
}

Change the Label

To change the label, you need to download the i18n-provider using the CLI.

• 1

  Add the Provider

  Use the add command to add the i18n-provider.

  pnpmnpmyarnbun

  pnpm yamada-cli add i18n-provider
  

• 2

  Change the Language Data

  The i18n-provider's intl folder contains the data for each language. Change the data for the language you want to change.

  intl/ja-JP.ts

  import type { IntlData } from "."
  
  const data: IntlData = {
    /* ... */
    avatar: {
      "Avatar Icon": "ユーザーアイコン",
    },
    /* ... */
  }
  
  export default data
  

  The language data is based on English, and the English key is associated with the data for each language. If you change en-US.ts, you need to correct all language data. If you do not change it, the association of language data will be lost.

Add a Language

To add a language, you need to download the i18n-provider using the CLI.

• 1

  Add the Provider

  Use the add command to add the i18n-provider.

  pnpmnpmyarnbun

  pnpm yamada-cli add i18n-provider
  

• 2

  Add the Language Data

  The i18n-provider's intl folder contains the data for each language. Add the data for the new language. The data is copied and pasted from intl/en-US.ts and changed for each value.

  intl/vi-VN.ts

  import type { IntlData } from "."
  
  const data: IntlData = {
    autocomplete: {
      "Clear value": "Giá trị xóa",
      "No results found": "Không tìm thấy kết quả",
    },
    /* ... */
  }
  
  export default data
  

• 3

  Update the Index

  Add the language data you added to intl/index.ts.

  intl/index.ts

  import arAE from "./ar-AE"
  /* ... */
  import viVN from "./vi-VN"
  
  /* ... */
  
  export default {
    "ar-AE": arAE,
    /* ... */
    "vi-VN": viVN,
  }
  

Supported Locales

• Japanese (Japan)
• English (Great Britain)
• English (United States)
• Arabic (United Arab Emirates)
• Bulgarian (Bulgaria)
• Croatian (Croatia)
• Czech (Czech Republic)
• Danish (Denmark)
• Dutch (Netherlands)
• Estonian (Estonia)
• Finnish (Finland)
• French (Canada)
• French (France)
• German (Germany)
• Greek (Greece)
• Hebrew (Israel)
• Hungarian (Hungary)
• Italian (Italy)
• Latvian (Latvia)
• Lithuanian (Lithuania)
• Norwegian (Norway)
• Polish (Poland)
• Portuguese (Brazil)
• Romanian (Romania)
• Russian (Russia)
• Serbian (Serbia)
• Slovakian (Slovakia)
• Slovenian (Slovenia)
• Spanish (Spain)
• Swedish (Sweden)
• Turkish (Turkey)
• Ukrainian (Ukraine)
• Chinese (Simplified)
• Chinese (Traditional)
• Korean (Korea)

Optimize the Bundle Size

Yamada UI includes the data for all of the languages above by default. This is convenient for many users, but it increases the bundle size. If your application does not support all of these locales, you can optimize the bundle size by removing unnecessary data from intl/index.ts.