Text and languages

There are exactly two kinds of text on a screen built with @arbol-ai/ui.

App copy: always yours

Titles, labels, descriptions, column headers, button labels, empty-state sentences and item names come through props and children, already translated by your app’s own system (Paraglide’s m.*(), i18next’s t(), or plain text). The library never defaults app copy.

<PageHeader>
  <PageTitle>{m.contacts_title()}</PageTitle>
</PageHeader>
<SearchField aria-label={m.contacts_search()} placeholder={m.contacts_searchPlaceholder()} />

Library strings: built in, Spanish and English

What a component says by itself (a close button’s name, “Previous page”, “1–15 of 120”, “No results”, screen-reader instructions, “Copied”) ships in English (en-US) and Latin American Spanish (es-419) and follows UIProvider locale: any es-* locale reads Spanish, everything else English. Numbers inside them are formatted for the locale (1.234 in es-CO).

Replace any of them, in whichever locale is active, with UIProvider messages. Values are strings or functions of the message’s variables:

<UIProvider
  locale={locale}
  messages={{
    'overlay.close': m.ui_close,
    'pagination.range': ({ first = '', last = '', total = '' }) => m.ui_pagination_range({ first, last, total }),
  }}
>

A Paraglide message without variables plugs in directly; wrap one with variables, because the library passes them as Record<string, string | number>. Variables keep the names Arbol’s catalogs use: first, last, total, count, page, label, value. Several components also take a prop for one instance’s string (saveLabel, retryLabel, cancelLabel, allLabel, emptyLabel, dismissLabel).

Dates, times and numbers

Components format with React Aria and @internationalized/date in the provider’s locale. Spanish conventions differ by region (es-CO: 12-hour clock, weeks start on Sunday; es: 24-hour, Monday), so pick the locale tag deliberately, and pass firstDayOfWeek or hourCycle to the date components when the product needs another convention. Pass numbers as numbers and dates as CalendarDate or ZonedDateTime values, never pre-formatted strings, so plural rules and formats stay correct.

Every component page has a language switch: its examples speak Spanish or English.