# OntoUI

> Agent-first React component library — easy to integrate, easy to reason about.

OntoUI is a React component library built on top of [Base UI](https://base-ui.com) (unstyled accessible primitives). Components are styled with CSS Modules, have no runtime dependencies beyond React, and are designed with LLM agents in mind: tightly-scoped, composable, with predictable props and minimal surface area.

## Installation

```bash
npm install @ontoui/react
# or
pnpm add @ontoui/react
```

Import styles once in your app entry point:

```ts
import '@ontoui/react/styles';
```

**Requirements:** React 18+, Node.js 18+

## Documentation

- [Getting Started](https://ontoui.com/overview/getting-started/): Install the package, import styles, and use your first component.
- [Button](https://ontoui.com/components/button/): Interactive element that performs an action when clicked.
- [Accordion](https://ontoui.com/components/accordion/): Set of collapsible panels with headings.
- [Callout](https://ontoui.com/components/callout/): Block of highlighted text that draws attention to a message.
- [Checkbox](https://ontoui.com/components/checkbox/): Toggleable input that represents a boolean value.
- [Chip](https://ontoui.com/components/chip/): Compact label for a tag, category, or attribute.
- [Circular Progress](https://ontoui.com/components/circularprogress/): Ring showing how far along a task is, or a spinner when there is nothing to measure.
- [DataGrid](https://ontoui.com/components/datagrid/): Table component for displaying structured data.
- [Kbd](https://ontoui.com/components/kbd/): Visual representation of a keyboard key or shortcut.
- [Modal](https://ontoui.com/components/modal/): Dialog overlay for focused interactions.
- [NumberField](https://ontoui.com/components/numberfield/): Numeric input with stepper buttons and formatting.
- [OTP Field](https://ontoui.com/components/otpfield/): Input for one-time password codes.
- [Popover](https://ontoui.com/components/popover/): Floating panel anchored to a trigger element.
- [Progress](https://ontoui.com/components/progress/): Horizontal bar showing how far along a task is, or that one is running at all.
- [Radio Group](https://ontoui.com/components/radiogroup/): Group of mutually exclusive radio inputs.
- [Select](https://ontoui.com/components/select/): Dropdown input for selecting from a list of options.
- [Slider](https://ontoui.com/components/slider/): Range input for selecting a numeric value.
- [Sparkline](https://ontoui.com/components/sparkline/): Chart the size of a word, for a trend that has to sit inside a sentence, a cell, or a metric card.
- [Switch](https://ontoui.com/components/switch/): Toggle input for on/off states.
- [Tabs](https://ontoui.com/components/tabs/): Tabbed interface for switching between views.
- [Text Field](https://ontoui.com/components/textfield/): Single-line or multi-line text input.
- [Toast](https://ontoui.com/components/toast/): Brief notification messages.
- [Tooltip](https://ontoui.com/components/tooltip/): Contextual information shown on hover or focus.
- [Truncate](https://ontoui.com/components/truncate/): Text shortened to fit, with a tooltip only when something is actually hidden.
- [XY Pad](https://ontoui.com/components/xypad/): Two-dimensional slider for setting a pair of values with one gesture.