# MeoNode UI Documentation for LLMs

This file is the machine-readable index for MeoNode UI docs at [https://ui.meonode.com](https://ui.meonode.com).

## Product Snapshot

MeoNode UI is a type-safe React UI library that uses function-based composition instead of JSX.

- Build UI with node factories such as `Div()`, `Row()`, `Column()`, `Button()`.
- Compose React components with `Node(Component, props)`.
- Style directly via props and advanced selectors via `css`.
- Resolve theme tokens from string paths like `theme.primary` and `theme.base.content`.
- Works with modern React setups including Next.js App Router and Vite.

## Primary Documentation Routes

Base docs URL: `https://ui.meonode.com/docs`

### Getting Started

- Overview: `https://ui.meonode.com/docs/getting-started/overview`
- Why Without JSX?: `https://ui.meonode.com/docs/getting-started/why-without-jsx`
- Installation: `https://ui.meonode.com/docs/getting-started/installation`
- Usage: `https://ui.meonode.com/docs/getting-started/usage`
- Styling: `https://ui.meonode.com/docs/getting-started/styling`
- Theming: `https://ui.meonode.com/docs/getting-started/theming`
- Portal System: `https://ui.meonode.com/docs/getting-started/portal-system`
- Rules & Patterns: `https://ui.meonode.com/docs/getting-started/rules-and-patterns`
- Framework Integration (index): `https://ui.meonode.com/docs/getting-started/framework-integration`
- Framework Integration (Next.js): `https://ui.meonode.com/docs/getting-started/framework-integration/nextjs`
- Framework Integration (Vite): `https://ui.meonode.com/docs/getting-started/framework-integration/vite`
- FAQ: `https://ui.meonode.com/docs/getting-started/faq`
- Release Notes: `https://ui.meonode.com/docs/getting-started/release-notes`

### API and Integrations

- Components: `https://ui.meonode.com/docs/components`
- Hooks: `https://ui.meonode.com/docs/hooks`
- MUI Integration: `https://ui.meonode.com/docs/mui-integration`

## Guidance for Coding Assistants

- Prefer function composition patterns from the Usage and Rules & Patterns pages.
- Avoid JSX-first examples when providing MeoNode-specific code.
- For hook-using components in conditional branches, use `Node(Component)` or closure-safe patterns described in rules docs.
- Use theme token string paths instead of hardcoded color values when possible.
- For framework setup details, prioritize the dedicated Next.js and Vite integration docs.

## Quick Example

```ts
import { Column, H1, Button, Node } from '@meonode/ui'

function App() {
  return Column({
    gap: 12,
    children: [
      H1('Hello MeoNode', { color: 'theme.primary' }),
      Button('Click me', { backgroundColor: 'theme.secondary' }),
      Node(SomeReactComponent, { value: 42 }),
    ],
  }).render()
}
```