Install the package with React Aria, its two required peers:
npm i @arbol-ai/ui react-aria-components react-ariayarn add @arbol-ai/ui react-aria-components react-ariapnpm add @arbol-ai/ui react-aria-components react-ariabun add @arbol-ai/ui react-aria-components react-ariaPeers
| Peer | Version | For |
|---|---|---|
react, react-dom |
19 | Every component. |
react-aria-components |
1.21 or later | Every component. |
react-aria |
3.52 or later | Every component. |
tailwindcss |
4.1 or later | The theme and the classes the components use. |
echarts |
6 | @arbol-ai/ui/charts only. |
@tanstack/react-form |
1 | @arbol-ai/ui/form only. |
@tanstack/react-router |
1 | @arbol-ai/ui/router only. |
@tanstack/react-query |
5 | @arbol-ai/ui/query only. |
Add an optional peer only when the app imports its entry. Screens usually also import
@phosphor-icons/react (icons) and @internationalized/date (date values): add them when your own code
uses them.
Keep one copy of React Aria in the app (bun pm ls react-aria-components): two copies split the locale and
router contexts, and links stop routing.
The agent skill
Installing the package links its arbol-ui skill into your project (.agents/skills/arbol-ui and
.claude/skills/arbol-ui, pointing into node_modules, so it always matches the installed version). Bun
runs a dependency’s install script only when the app trusts it: list @arbol-ai/ui in
trustedDependencies in the app’s package.json, or link it by hand:
bunx arbol-ui-skillsThe same skill is published by this site; see For agents.
Next: Setup.