---
title: "Text and languages"
description: "App copy is always yours; the library's own strings ship in Spanish and English and follow the provider's locale. Dates and numbers format in that locale."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

```tsx
<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:

```tsx
<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](https://epidermis.getarbol.com/components/) has a language switch: its examples speak Spanish or English.

Source: https://epidermis.getarbol.com/guides/text-and-languages/index.mdx