---
language: "en"
title: "Packages"
canonical: "https://uniaria.tenphi.me/api/"
source: "docs/api/index.md"
index: true
---

# Packages

UniAria is six packages. `@uniaria/core` holds every component's behavior;
the three adapters bind it to React, to Vue and to custom elements; `@uniaria/testing`
checks an adapter or a component against real input and screen readers;
`@uniaria/styles` is an optional look for every component.

| Package             | What it is                                                                       | Install it when                                                 |
| ------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------- |
| `@uniaria/core`     | The runtime, the DOM layer, collections and one definition per component         | Always: the adapters depend on it                               |
| `@uniaria/react`    | `useBehavior`, `useBehaviorState` and `OwnerProvider`                            | You render with React                                           |
| `@uniaria/vue`      | `useBehavior` and `useBehaviorState`                                             | You render with Vue                                             |
| `@uniaria/elements` | `defineElement` and a registering entry per component element                    | You render HTML: plain pages, server templates, Svelte, Angular |
| `@uniaria/testing`  | The conformance runner, the mount contract, real input and screen-reader helpers | You write an adapter or test your own components                |
| `@uniaria/styles`   | Default styles: prebuilt CSS, a CSS builder, Tasty style objects and the palette | You want a look to start from                                   |

## Entry points

Each package exposes only the entries below (its `package.json` `exports`).
Import from these paths, never from files inside a package.

| Entry                           | Exports                                                                                                                                                                  | Reference                                                    |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------ |
| `@uniaria/core`                 | `defineBehavior`, `prop`, `bindable`, `event`, `createInstance` and the runtime types                                                                                    | [Runtime](/api/core/)                                        |
| `@uniaria/core/dom`             | `configure` for page-wide settings; interactions, focus, layers, positioning and the announcer for definition authors; the binder and part discovery for adapter authors | [DOM layer](/api/dom/)                                       |
| `@uniaria/core/collections`     | `createListCollection`, `createTypeahead`, `findByText`                                                                                                                  | [Collections](/api/collections/)                             |
| `@uniaria/core/virtual`         | `virtualizer`, the engine a virtualized Listbox, Autocomplete, Select or Combobox takes                                                                                  | [Collections](/api/collections/#virtualization)              |
| `@uniaria/core/<component>`     | One definition, plus its `<Name>Props` and `<Name>State` types (table below)                                                                                             | The component's page                                         |
| `@uniaria/react`                | `useBehavior`, `useBehaviorState`, `OwnerProvider`                                                                                                                       | [React](/api/react/)                                         |
| `@uniaria/vue`                  | `useBehavior`, `useBehaviorState`                                                                                                                                        | [Vue](/api/vue/)                                             |
| `@uniaria/elements`             | `defineElement` and the element types                                                                                                                                    | [Custom elements](/api/elements/)                            |
| `@uniaria/elements/<component>` | Registers `<uni-<component>>` on import, and exports its class and element type                                                                                          | [Custom elements](/api/elements/#registering-entries)        |
| `@uniaria/testing`              | `defineConformance`, the templates (`h`, `nested`, `rows`) and the mount contract types                                                                                  | [Testing](/api/testing/)                                     |
| `@uniaria/testing/browser`      | `runConformance`, real input and spoken output, for Vitest browser mode                                                                                                  | [Testing](/api/testing/#running-suites)                      |
| `@uniaria/testing/commands`     | `uniCommands` and `screenReaderCommands`, the Playwright commands for your Vitest config                                                                                 | [Testing](/api/testing/#running-suites)                      |
| `@uniaria/styles/css`           | The prebuilt stylesheets: everything, `layered`, `tokens.css`, `components.css`, one per component and `positioning.css`                                                 | [Default styles](/guide/default-styles/#prebuilt-css)        |
| `@uniaria/styles/build`         | `buildCss()`, the stylesheets built with your tokens, palette and overrides, in Node                                                                                     | [Default styles](/guide/default-styles/#customized-css)      |
| `@uniaria/styles`               | The Tasty style object of every component, also one per subpath (`@uniaria/styles/checkbox`)                                                                             | [Default styles](/guide/default-styles/#tasty-style-objects) |
| `@uniaria/styles/palette`       | `createPalette()` from Glaze seeds and `paletteCss()`, for colors of your own                                                                                            | [Theming](/guide/theming/#your-palette)                      |
| `@uniaria/styles/tasty`         | `uniaria()`, the Tasty plugin that adds the tokens and the palette to Tasty's runtime                                                                                    | [Theming](/guide/theming/#in-tastys-runtime)                 |

### Components

Every component has a subpath of `@uniaria/core` that exports its definition,
and every one but TextInput a registering entry of the same name in
`@uniaria/elements`. TextInput is the native input inside the text fields,
for definitions that compose it.

| Subpath          | Definition      | Element                | Page                                                                 |
| ---------------- | --------------- | ---------------------- | -------------------------------------------------------------------- |
| `button`         | `button`        | `<uni-button>`         | [Button](/components/button/)                                        |
| `toggle-button`  | `toggleButton`  | `<uni-toggle-button>`  | [ToggleButton](/components/toggle-button/)                           |
| `field`          | `field`         | `<uni-field>`          | [Field](/components/field/)                                          |
| `text-input`     | `textInput`     | None                   | [Custom components](/guide/custom-components/#build-on-the-controls) |
| `text-field`     | `textField`     | `<uni-text-field>`     | [TextField](/components/text-field/)                                 |
| `number-field`   | `numberField`   | `<uni-number-field>`   | [NumberField](/components/number-field/)                             |
| `checkbox`       | `checkbox`      | `<uni-checkbox>`       | [Checkbox](/components/checkbox/)                                    |
| `checkbox-group` | `checkboxGroup` | `<uni-checkbox-group>` | [CheckboxGroup](/components/checkbox-group/)                         |
| `switch`         | `toggleSwitch`  | `<uni-switch>`         | [Switch](/components/switch/)                                        |
| `radio-group`    | `radioGroup`    | `<uni-radio-group>`    | [RadioGroup](/components/radio-group/)                               |
| `radio`          | `radio`         | `<uni-radio>`          | [RadioGroup](/components/radio-group/)                               |
| `dialog`         | `dialog`        | `<uni-dialog>`         | [Dialog](/components/dialog/)                                        |
| `popover`        | `popover`       | `<uni-popover>`        | [Popover](/components/popover/)                                      |
| `tooltip`        | `tooltip`       | `<uni-tooltip>`        | [Tooltip](/components/tooltip/)                                      |
| `listbox`        | `listbox`       | `<uni-listbox>`        | [Listbox](/components/listbox/)                                      |
| `autocomplete`   | `autocomplete`  | `<uni-autocomplete>`   | [Autocomplete](/components/autocomplete/)                            |
| `select`         | `select`        | `<uni-select>`         | [Select](/components/select/)                                        |
| `combobox`       | `combobox`      | `<uni-combobox>`       | [Combobox](/components/combobox/)                                    |

Switch's definition is `toggleSwitch` because `switch` is a reserved word.
`@uniaria/core/tooltip` also exports `tooltipLink`, the key other components
take a tooltip through (see [links](/api/core/#owners-and-links)).

```ts
import { checkbox } from '@uniaria/core/checkbox';
import type { CheckboxProps, CheckboxState } from '@uniaria/core/checkbox';
```

## Dependencies

| Package             | Dependencies                                       | Peer dependencies                                                                      |
| ------------------- | -------------------------------------------------- | -------------------------------------------------------------------------------------- |
| `@uniaria/core`     | `@internationalized/number` (NumberField)          | None                                                                                   |
| `@uniaria/react`    | `@uniaria/core`                                    | `react` `^18.0.0 \|\| ^19.0.0`                                                         |
| `@uniaria/elements` | `@uniaria/core`                                    | None                                                                                   |
| `@uniaria/testing`  | `@uniaria/core`, `@guidepup/virtual-screen-reader` | `vitest` `^5.0.0`; `@guidepup/guidepup` `^0.35.0`, optional (real screen readers only) |

`@uniaria/core/virtual` bundles one pinned version of
`@tanstack/virtual-core`, so there is nothing extra to install, and only code
that imports `@uniaria/core/virtual` loads it. `@uniaria/elements` needs no
framework. `@uniaria/react` needs `react` only; it doesn't import
`react-dom`.

## Format and versions

* **ES modules only.** Every entry is ESM compiled to ES2022, with `.d.ts`
  types and source maps. There is no CommonJS build. The packages require
  Node 22 or later wherever Node loads them.
* **Tree-shakable.** `@uniaria/core`, `@uniaria/react` and `@uniaria/testing`
  have no side effects. In `@uniaria/elements` only the registering entries
  do (they define an element), and they are listed in its `sideEffects`; in
  `@uniaria/styles`, only the stylesheets.
* **One version.** The five packages are released together under one version
  number. Install the same version of each.
* **Several copies on one page.** Page-wide state (the layer stack, focus
  scopes, the input-modality tracker, the live announcer, scroll lock and the
  [settings](/api/dom/#settings)) is stored under `Symbol.for('@uniaria/…')`
  keys, so two copies of UniAria on one page share it instead of fighting.

UniAria is a pre-release: every package is at 0.x, and its API can change
in any 0.x version.

## Server rendering

Every entry imports in Node without a DOM: nothing touches `document` or
`window` when a module loads, and each entry has a test that imports it
without one.

* `@uniaria/react` renders complete HTML on the server: attributes, ids,
  ARIA state and the starting values of form controls. Effects never run
  there. See [React](/api/react/#server-rendering) and
  [Server rendering](/guide/server-rendering/).
* `@uniaria/elements` defines nothing on the server: `defineElement` returns
  `undefined` where there is no `customElements`, and so does each registering
  entry's class export. The markup you render on the server is the markup the
  element upgrades in the browser.
* `@uniaria/testing` is safe to import anywhere. `@uniaria/testing/browser`
  runs only in Vitest's browser mode and `@uniaria/testing/commands` only in
  Node, inside your Vitest config.