Setup | Arbol UI

Import the theme
In your entry stylesheet, after Tailwind:
app.csscss
```
@import 'tailwindcss';
@import '@arbol-ai/ui/theme.css';
```
The theme adds the tokens (bg-primary, text-muted-foreground, rounded-field, shadow-md, the gray and status ramps), the base layer, and an @source for the library’s files, so Tailwind generates the classes the components use.

Render the provider

With TanStack Router, render RouterUIProvider once, in the root route’s component (it reads the router, so it goes inside it):

import { RouterUIProvider } from '@arbol-ai/ui/router';
import { createRootRoute, Outlet } from '@tanstack/react-router';

export const Route = createRootRoute({
  component: () => (
    <RouterUIProvider locale={locale}>
      <Outlet />
    </RouterUIProvider>
  ),
});

With any other router, render UIProvider with your router’s navigate:

import { UIProvider } from '@arbol-ai/ui';

<UIProvider locale="es-CO" navigate={(href, options) => router.navigate({ ...options, href })}>
  <App />
</UIProvider>;

Pass the whole href (a path alone drops the query string). Leave useHref out unless the router adds a base path, and then apply it only to hrefs that start with /, never to tel: or https: links.

Mount the toaster
Render <Toaster /> once inside the provider, usually in the root layout, then call toast.success(…) or toast.error(…) from anywhere.

Build a page

import { Button, PageContainer, PageHeader, PageTitle } from '@arbol-ai/ui';

<PageContainer>
  <PageHeader>
    <PageTitle>Contacts</PageTitle>
    <Button onPress={openNewContact}>New contact</Button>
  </PageHeader>
</PageContainer>;

The locale

locale is the app’s language as a BCP 47 tag. React Aria formats dates and numbers with it, and the library picks its own strings by language: any es-* locale reads Spanish, everything else English.

Paraglide: locale={getLocale() === 'es' ? 'es-CO' : 'en-US'}.
i18next: locale={i18n.language}.
Spanish only: locale="es-CO".

See Text and languages.

Typed hrefs

Every href in the library (links, menu items, tabs, table rows, breadcrumbs, navigation) navigates client-side through the provider. Type them with React Aria’s RouterConfig, keeping room for external links, which stay as they are:

import type { NavigateOptions, ToOptions } from '@tanstack/react-router';

declare module 'react-aria-components' {
  interface RouterConfig {
    href: ToOptions['to'] | `${'http' | 'https' | 'mailto' | 'tel'}:${string}`;
    routerOptions: Omit<NavigateOptions, keyof ToOptions>;
  }
}