---
title: "Setup"
description: "Import the theme after Tailwind, render UIProvider or RouterUIProvider once at the root, mount the Toaster, and build a first page."
---

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

# Setup

1. **Import the theme**

   In your entry stylesheet, after Tailwind:

   ```css title="app.css"
   @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.
2. **Render the provider**

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

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

   ```tsx
   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.
3. **Mount the toaster**

   Render `<Toaster />` once inside the provider, usually in the root layout, then call
   `toast.success(…)` or `toast.error(…)` from anywhere.
4. **Build a page**

   ```tsx
   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](https://epidermis.getarbol.com/guides/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:

```ts
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>;
  }
}
```

Source: https://epidermis.getarbol.com/get-started/setup/index.mdx