# Overview (/cloud/headless)



`@nyte-ai/ui/<name>` is a one-line re-export of a Base UI namespace. Nothing is styled; Base UI
owns the interaction model and the consumer owns every visual decision. The point of the subpath
is that the Base UI dependency and version stay behind the shared package.

```ts
import { Popover } from "@nyte-ai/ui/popover";
```

Each page in this section is Base UI's own documentation for that component, reproduced verbatim
(MIT, © Material-UI SAS) with a Nyte header that lists the repo files consuming it. They are
regenerated by `pnpm --dir packages/docs sync:base-ui`; `check:base-ui` fails when they drift.

## Rules [#rules]

* Import from the subpath, never from `@base-ui/react` directly.
* A styled wrapper belongs in `packages/ui/src/components/ui` only when more than one product
  needs the same look. Product-specific composites (the desktop menu, settings controls) stay in
  the product.
* Do not replace Base UI's keyboard or focus behavior. Add to it with `onKeyDown` only when the
  surface has a documented reason (the composer's suggestion listbox is the example).
* `render` is the composition mechanism. When a rendered element is not a `<button>`, pass
  `nativeButton={false}` so Base UI keeps button semantics.

## Subpaths [#subpaths]

| Subpath         | Base UI      | Styled wrapper in `@nyte-ai/ui`                  | Desktop tier                                        |
| --------------- | ------------ | ------------------------------------------------ | --------------------------------------------------- |
| `/alert-dialog` | AlertDialog  | [Alert dialog](/cloud/primitives/alert-dialog)   | [ConfirmDialog](/cloud/desktop/confirm-dialog)      |
| `/autocomplete` | Autocomplete | none                                             | Model picker search                                 |
| `/button`       | Button       | [Button](/cloud/primitives/button)               | [Button, IconButton](/cloud/desktop/button)         |
| `/collapsible`  | Collapsible  | none                                             | Tool call, work group, reasoning, sidebar           |
| `/context-menu` | ContextMenu  | none                                             | [ContextMenu](/cloud/desktop/menu)                  |
| `/dialog`       | Dialog       | [Dialog](/cloud/primitives/dialog)               | About, image preview, workspace trust               |
| `/menu`         | Menu         | [Dropdown menu](/cloud/primitives/dropdown-menu) | [Menu](/cloud/desktop/menu)                         |
| `/number-field` | NumberField  | none                                             | [SettingsStepper](/cloud/desktop/settings-controls) |
| `/popover`      | Popover      | none                                             | Composer suggestion listbox                         |
| `/preview-card` | PreviewCard  | none                                             | Sidebar session preview, composer detail card       |
| `/select`       | Select       | none                                             | [SettingsSelect](/cloud/desktop/settings-controls)  |
| `/slider`       | Slider       | none                                             | Appearance hue/intensity/density                    |
| `/switch`       | Switch       | none                                             | [SettingsSwitch](/cloud/desktop/settings-controls)  |
| `/tabs`         | Tabs         | none                                             | Search palette, customize, workbench tab strip      |
| `/toggle`       | Toggle       | none                                             | [ToggleIconButton](/cloud/desktop/button)           |
| `/toggle-group` | ToggleGroup  | none                                             | Usage range control                                 |
| `/toolbar`      | Toolbar      | none                                             | Changes panel actions                               |
| `/tooltip`      | Tooltip      | none                                             | [Hint](/cloud/desktop/button)                       |

Also from `@nyte-ai/ui/sonner`: `Toaster`, `toast`, and the `ExternalToast` / `ToasterProps` types
from the `sonner` package. See [Toaster](/cloud/desktop/toaster).

## Not wrapped [#not-wrapped]

Base UI parts with no subpath yet: Checkbox, CheckboxGroup, Radio, RadioGroup, Field, Fieldset,
Form, Progress, Meter, Separator, ScrollArea, Accordion, Combobox, NavigationMenu, Toast. Add a
subpath file in `packages/ui/src/<name>.ts` and an `exports` entry before consuming one.