---
title: "Arbol UI"
description: "@arbol-ai/ui: accessible React components for building dashboards fast, built on React Aria Components and Tailwind CSS v4, with every built-in string in Spanish and English."
---

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

# Arbol UI

`@arbol-ai/ui` is the component library of [Arbol](https://www.getarbol.com)'s Raíz, Agenda and Account
dashboards: [React Aria Components](https://react-aria.adobe.com) styled with
[Tailwind CSS v4](https://tailwindcss.com), a token-based theme, and an agent skill that teaches coding
agents to assemble pages with it. It is open source under the MIT license and published to npm.

- **Accessible by construction.** Keyboard, screen readers, focus management and touch come from React Aria.
- **Localized.** The library's own strings ship in Spanish and English, follow your app's locale, and can be
  replaced with your own translation functions (Paraglide, i18next).
- **Router-agnostic.** Every `href` routes through your router via one provider.
- **Dashboard-ready.** Data tables on TanStack Table, filters, pagination, stats, charts on ECharts, forms on
  TanStack Form, overlays with an unsaved-changes guard, an app shell and settings pages.
- **Themeable.** Every color, radius, shadow, font, size and width is a CSS variable: change one and every
  component follows. Light, dark, brand and mono.

- **Installation** — The package, its peers and the optional entries.
- **Setup** — The theme, the provider, toasts and your first page.
- **Components** — Every component and block, live, with the code to paste.
- **For agents** — The agent skill, llms.txt, Markdown pages and the MCP server.

## What it holds

Presentation only: components, blocks, the design tokens and the strings components say by themselves. No
API calls, routes, permissions or app copy. Your app passes its own translated text through props and
children, and keeps its state, its data and its URLs.

| Entry | What |
| --- | --- |
| `@arbol-ai/ui` | Every component and block, `UIProvider`, the hooks and types. |
| `@arbol-ai/ui/theme.css` | The tokens, the base layer and Tailwind's `@source` for the library. |
| `@arbol-ai/ui/charts` | Charts on ECharts (optional peer `echarts`). |
| `@arbol-ai/ui/form` | Fields bound to TanStack Form (optional peer `@tanstack/react-form`). |
| `@arbol-ai/ui/router` | `RouterUIProvider` and the unsaved-changes blocker for TanStack Router. |
| `@arbol-ai/ui/query` | `QueryView`: a TanStack Query result as loading, error, empty or data. |
| `@arbol-ai/ui/arbi` | Arbi's chat, shared by every Arbol app (styles: `@arbol-ai/ui/arbi.css`). |

Source: https://epidermis.getarbol.com/index.mdx