# Moul UI

> Moul UI (@moul-dev/ui) is an accessible, zero-runtime React component library built with React Aria Components and StyleX.

## Quick Start
- **Package**: `@moul-dev/ui`
- **Install**: `bun add @moul-dev/ui` (or `npm install @moul-dev/ui`)
- **Stylesheet**: `import '@moul-dev/ui/style.css'`
- **Theme Provider**: `import { ThemeProvider } from '@moul-dev/ui'`

## AI Agent Rules & Key Conventions
- **Imports**: Always import components directly from `@moul-dev/ui`.
- **Button Activation**: Use `onPress` instead of `onClick` on `<Button>`, `<Link>`, and interactive triggers.
- **Selection State**: Single-item components use `isSelected` / `onChange`. Collection components (`Select`, `Tabs`, `Table`, `Sidebar`) use `selectedKey` / `selectedKeys` and `onSelectionChange`.
- **Dialogs & Overlays**: Use `isOpen` and `onOpenChange` on `<ModalOverlay>`, `<Popover>`, and `<AlertDialog>`.
- **Dynamic Theming**: CSS variables (`--brand-hue`, `--brand-chroma-multiplier`, `--brand-density-factor`, `--brand-radius-factor`) provide zero-runtime customizable aesthetics.

## Context Files & Agent Instructions
- **Full Documentation (All Pages & Types)**: [/llms-full.txt](/llms-full.txt)
- **Agent Instructions & Code Recipes**: [/AGENTS.md](/AGENTS.md)

---

# Documentation

- [Get Started](/docs): Meet Moul UI. An accessible, zero-runtime React component library built on React Aria and StyleX.
- [LLMs & AI Agents](/docs/llms): Context files, rules, and best practices for using Moul UI with Cursor, Claude, Windsurf, Copilot, and AI coding assistants.
- Components
  - [Alert](/docs/components/alert): Documentation for the Alert component.
  - [AlertDialog](/docs/components/alertdialog): Documentation for the AlertDialog component.
  - [Avatar](/docs/components/avatar): Documentation for the Avatar component.
  - [Badge](/docs/components/badge): Documentation for the Badge component.
  - [Breadcrumbs](/docs/components/breadcrumbs): Documentation for the Breadcrumbs component.
  - [Button](/docs/components/button): Documentation for the Button component.
  - [ButtonGroup](/docs/components/buttongroup): Documentation for the ButtonGroup component.
  - [Card](/docs/components/card): A container component to group related content, actions, and information.
  - [Checkbox](/docs/components/checkbox): Documentation for the Checkbox component.
  - [CheckboxGroup](/docs/components/checkboxgroup): Documentation for the CheckboxGroup component.
  - [ComboBox](/docs/components/combobox): Documentation for the ComboBox component.
  - [Form](/docs/components/form): Documentation for the Form component.
  - [InputOTP](/docs/components/inputotp): An accessible, customizable, and composable One-Time Password input component.
  - [Kbd](/docs/components/kbd): Documentation for the Kbd component.
  - [Link](/docs/components/link): Documentation for the Link component.
  - [Modal](/docs/components/modal): Documentation for the Modal component.
  - [NumberField](/docs/components/numberfield): Documentation for the NumberField component.
  - [Popover](/docs/components/popover): Documentation for the Popover component.
  - [RadioGroup](/docs/components/radiogroup): Documentation for the RadioGroup component.
  - [SearchField](/docs/components/searchfield): Documentation for the SearchField component.
  - [Select](/docs/components/select): Documentation for the Select component.
  - [Separator](/docs/components/separator): Documentation for the Separator component.
  - [Skeleton](/docs/components/skeleton): Documentation for the Skeleton component.
  - [Slider](/docs/components/slider): Documentation for the Slider component.
  - [Spinner](/docs/components/spinner): Documentation for the Spinner component.
  - [Switch](/docs/components/switch): Documentation for the Switch component.
  - [Table](/docs/components/table): Documentation for the Table component.
  - [Tabs](/docs/components/tabs): Documentation for the Tabs component.
  - [TagGroup](/docs/components/taggroup): Documentation for the TagGroup component.
  - [TextArea](/docs/components/textarea): Documentation for the TextArea component.
  - [TextField](/docs/components/textfield): Documentation for the TextField component.
  - [Toast](/docs/components/toast): Documentation for the Toast component.
  - [ToggleButton](/docs/components/togglebutton): A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.
  - [ToggleButtonGroup](/docs/components/togglebuttongroup): A toggle button group allows a user to toggle multiple options, with single or multiple selection.
  - [Tooltip](/docs/components/tooltip): Documentation for the Tooltip component.
  - [Typography](/docs/components/typography): Documentation for the Typography component.
  - Charts
    - [LineChart](/docs/components/charts/linechart): Documentation for the LineChart (TimeSeries) component.
    - [AreaChart](/docs/components/charts/areachart): Documentation for the AreaChart component.
    - [BarChart](/docs/components/charts/barchart): Documentation for the BarChart component.
    - [DoughnutChart](/docs/components/charts/doughnutchart): Documentation for the DoughnutChart component.
    - [TopList](/docs/components/charts/toplist): Documentation for the TopList component.
    - [Stat](/docs/components/charts/stat): Documentation for the Stat component.
    - [Percentage](/docs/components/charts/percentage): Documentation for the PercentageBar and PercentageCircle components.
- Blocks
  - [Sidebar](/docs/blocks/sidebar): A premium collapsible navigation sidebar block styled with StyleX and built with React Aria.