# Introduction (/cloud/introduction) Cloud is the design system for Nyte. It names the tokens, the primitives, and the application surfaces that every host renders, and it says which file implements each one. The pages under it are written to be read by an agent before it touches a component, and by a person who wants to know why the component looks and behaves the way it does. ## What this covers [#what-this-covers] Nyte ships the same product in three hosts. Each host renders the same concerns with different materials, and Cloud documents them in the tier they actually live in. ``` @base-ui/react headless interaction, focus, ARIA └─ @nyte-ai/ui 6 styled wrappers, 18 headless re-exports, --nyte-* tokens └─ desktop/components Menu, Button, ConfirmDialog, Settings controls (own theme vars) └─ desktop surfaces ModelPicker, SearchPalette, Sidebar, DiffView, Composer… @opentui/core terminal (documented later; not in this pass) ``` | Section | What it holds | Source of truth | | ----------- | --------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | | Foundations | Tokens, theming channels, focus modality, icons | `packages/ui/src/platform-tokens.stylex.ts` | | Primitives | The styled wrappers exported from `@nyte-ai/ui`: Button, Avatar, Input, Textarea, Dialog, Alert dialog, Dropdown menu | `packages/ui/src/components/ui/*.tsx` | | Headless | The Base UI namespaces `@nyte-ai/ui/` re-exports without styling, with Base UI's documentation verbatim | `packages/ui/src/.ts`, Base UI docs (MIT) | | Desktop | The desktop app's own component tier and the application surfaces built on it | `packages/desktop/src/renderer/src/**` | | Surfaces | One page per product concern, saying which component implements it in each host | this section | ## How to read a component page [#how-to-read-a-component-page] Every page follows the same order so an agent can jump to what it needs. 1. **Import** and the file that implements it. 2. **Usage** rules: when to reach for this and when not to. 3. **Anatomy**: the parts, in the nesting they must appear in. 4. **Examples**: live where the component is pure, code otherwise. 5. **Props** as a table. For headless pages the table is Base UI's own. 6. **Accessibility**: the keyboard model, focus behavior, and ARIA the component guarantees. 7. **Data attributes and styling hooks**. ## Precedence and voice [#precedence-and-voice] Cloud describes what shipped. It is not the core contract; when a Cloud page and the [design record](/docs/design) disagree about the runtime, the design record wins. Within Cloud, **must** and **must not** mark accessibility and interaction rules that a change is not allowed to regress. Anatomy and props are descriptive. ## Verbatim material [#verbatim-material] Base UI owns the interaction layer. Their component documentation is MIT-licensed (© Material-UI SAS), and Cloud reproduces the relevant props tables, anatomy, and accessibility notes word for word rather than paraphrasing them, so an agent reads the same guarantees the library author wrote. Every headless page carries the attribution. Regenerate them with: ```bash node packages/docs/scripts/sync-base-ui-reference.mjs ``` The structure of the pages (Usage → Anatomy → Examples → Props → Accessibility) follows Vercel's Geist documentation. The wording is Nyte's. ## Known gaps [#known-gaps] * `@nyte-ai/ui` ships styled wrappers for six components. The desktop app does not use them; it imports the headless subpaths and styles a second tier in `desktop/src/renderer/src/components`. Both tiers are documented. The duplication is the known target for consolidation. * `@nyte-ai/ui` and the desktop keep separate token systems: `--nyte-*` from `platform-tokens.stylex.ts` and `t.*` from `desktop/src/renderer/src/theme/vars.stylex.ts`. [Foundations](/cloud/foundations/tokens) documents both. * Twelve of the eighteen headless subpaths have no Nyte styling anywhere yet. Their pages exist so the accessibility contract is on record before a wrapper is written. * Terminal components are out of scope for this pass. ## Index [#index] ### Foundations [#foundations] * [Tokens](/cloud/foundations/tokens) * [Theming and styling channels](/cloud/foundations/theming) * [Focus and keyboard](/cloud/foundations/focus) * [Icons](/cloud/foundations/icons) ### Primitives [#primitives] * [Button](/cloud/primitives/button) * [Avatar](/cloud/primitives/avatar) * [Input](/cloud/primitives/input) * [Textarea](/cloud/primitives/textarea) * [Dialog](/cloud/primitives/dialog) * [Alert dialog](/cloud/primitives/alert-dialog) * [Dropdown menu](/cloud/primitives/dropdown-menu) ### Headless [#headless] [Overview](/cloud/headless) and one page per subpath: alert-dialog, autocomplete, button, collapsible, context-menu, dialog, menu, number-field, popover, preview-card, select, slider, switch, tabs, toggle, toggle-group, toolbar, tooltip. ### Desktop [#desktop] * [Overview](/cloud/desktop) * [Theme variables](/cloud/desktop/theme) * [Button and focus](/cloud/desktop/button) * [Menu](/cloud/desktop/menu) * [Confirm dialog](/cloud/desktop/confirm-dialog) * [Toaster](/cloud/desktop/toaster) * [Spinner and animated number](/cloud/desktop/feedback) * [Icons](/cloud/desktop/icons) * [Settings controls](/cloud/desktop/settings-controls) ### Surfaces [#surfaces] * [Model and subagent picker](/cloud/surfaces/model-picker) * [Settings](/cloud/surfaces/settings) * [Command palette and search](/cloud/surfaces/command-palette) * [Session list and sidebar](/cloud/surfaces/sidebar) * [Transcript and tool calls](/cloud/surfaces/transcript) * [Diff view](/cloud/surfaces/diff-view) * [Composer](/cloud/surfaces/composer) * [Permission and consent prompts](/cloud/surfaces/consent) * [Tasks and jobs](/cloud/surfaces/jobs) * [Workbench](/cloud/surfaces/workbench) * [Toasts and notices](/cloud/surfaces/toasts)