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>
  );
}

Return	Type	Description
`t(key)`	`function`	Translate a key to the current locale
`locale`	`string`	Current locale code
`dir`	`'ltr'` / `'rtl'`	Text direction (`'rtl'` for Arabic)
`fmtCents(cents, currency)`	`function`	Format cents as currency — `$49.99` (en), `٤٩٫٩٩` (ar)
`fmtNum(n)`	`function`	Format 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:

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

Next Steps

Pre-built UI — All settings screens and page components.
Permissions — Role-based access control.