> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kansolabs.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Localisation

> Render every label, number and direction in the reader's language with I18nProvider.

Wrap the app in `I18nProvider`, which this package re-exports, and every word the components write follows its locale.

```tsx theme={null}
import { I18nProvider } from '@kanso-labs/kanso-ui'

export function App({ children }: { children: React.ReactNode }) {
  return <I18nProvider locale="pt-BR">{children}</I18nProvider>
}
```

## What gets translated

React Aria names most of the controls the components draw, in some thirty languages: an overlay's dismiss button, a field's clear button and steppers, a snackbar's close, a chip's remove, a row's selection box, a column's resize handle, a picker's trigger and a colour picker's strips.

Five strings have no word in React Aria, so this package carries them in the same locales React Aria ships:

* the ring a pending `Button` or `IconButton` shows,
* a collection's loading-more row,
* `CopyField`'s button, and what it announces once it has copied,
* a field's character limit.

Those translations are the package's own, and a wrong one is worth an [issue](https://github.com/kanso-labs/kanso-ui/issues).

### Using your own words

Every string sits behind a prop for the call site's own words:

| Prop | Where |
| - | - |
| `pendingLabel` | `Button`, `IconButton` |
| `label` | `LoadMore` |
| `copyLabel`, `copiedLabel` | `CopyField` |
| `characterLimitLabel` | fields with a character limit |
| `clearLabel`, `closeLabel` and the rest | the names React Aria gives |

Numbers follow the provider too: `Currency` writes its amount, and a field its character count, in the locale's digits and grouping. A right-to-left locale turns the layout over, overlays included.

## Ship only the locales you support

A bundler includes every language React Aria ships unless told which ones the app supports. [`@react-aria/optimize-locales-plugin`](https://www.npmjs.com/package/@react-aria/optimize-locales-plugin) is how an app says so. Install it as a development dependency and give it the locales the app hands `I18nProvider`.

**Next.js (Turbopack)**

Needs Next.js 15.4 or newer. The plugin's rules spread into `turbopack.rules`:

```ts next.config.ts theme={null}
import optimizeLocales from '@react-aria/optimize-locales-plugin'

const locales = optimizeLocales.turbopack({ locales: ['en-US', 'de-DE'] })

export default {
  turbopack: { rules: { ...locales.rules } },
}
```

The object is left untyped on purpose. The plugin types `locales` as a read-only array, which `NextConfig` does not accept, so `const config: NextConfig` fails Next.js's type check over the same rules.

**Vite**

```ts vite.config.ts theme={null}
import optimizeLocales from '@react-aria/optimize-locales-plugin'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [optimizeLocales.vite({ locales: ['en-US', 'de-DE'] })],
})
```

React Aria's strings for every other locale then build to nothing. The plugin's own README covers webpack, Rollup and esbuild.

The plugin reaches React Aria's tables alone. This package's five strings are one module holding every locale, included whole wherever a component uses it.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.