BuildBaseBuildBase

Overview

Built-in i18n with 8 locales, RTL support, and locale-aware number and currency formatting.

All pre-built UI in BuildBase is translated into 8 languages. Set the locale on SaaSOSProvider and everything - settings screens, pricing pages, error messages - adapts automatically.

<SaaSOSProvider
  serverUrl="https://api.console.buildbase.app"
  orgId="your-org-id"
  locale="es" // Spanish
>

Supported locales: en, es, fr, de, ja, zh, hi, ar.

useTranslation()

For locale-aware formatting in your own components:

import { useTranslation } from '@buildbase/sdk/react';

function PriceDisplay({ cents, currency }) {
  const { t, fmtCents, fmtNum, dir } = useTranslation();

  return (
    <div dir={dir}>
      <p>{t('subscription.currentPlan')}</p>
      <p>{fmtCents(cents, currency)}</p>
      <p>{fmtNum(1234)}</p>
    </div>
  );
}
ReturnTypeDescription
t(key)functionTranslate a key to the current locale
localestringCurrent locale code
dir'ltr' / 'rtl'Text direction ('rtl' for Arabic)
fmtCents(cents, currency)functionFormat cents as currency - $49.99 (en), ٤٩٫٩٩ (ar)
fmtNum(n)functionFormat number - 1,234 (en), १,२३४ (hi), ١٬٢٣٤ (ar)

RTL support

Arabic (ar) automatically sets dir to 'rtl'. Use it on your container to flip the layout:

const { dir } = useTranslation();

<div dir={dir}>{/* Layout flips automatically for Arabic */}</div>;

Native numerals

fmtCents and fmtNum use native numeral systems:

LocalefmtCents(4999, 'usd')fmtNum(1234)
en$49.991,234
hi₹49.99 (Devanagari)१,२३४
ar٤٩٫٩٩ (Arabic-Indic)١٬٢٣٤

The hosted sign-in page

The sign-in page speaks the same languages. signIn() sends the provider's locale, or auth.locale when you want the sign-in page in another one, so a person who was reading your app in Spanish signs in in Spanish. The page also has a language switcher in its footer, and emails stay in English. See Sign-in page brand and language.

Next Steps