# @beinformed/ui

`@beinformed/ui` provides the core infrastructure and high-level React building blocks for applications powered by [Be Informed](https://www.beinformed.com) Modular UI services.

It handles the complexities of state management, server-side rendering, and model rehydration, allowing you to focus on building rich user experiences.

## ✨ Features

- **Model-Driven UI**: Automatically transforms Modular UI service responses into rich JavaScript Class instances (Models) that combine data with metadata and logic.
- **React-First**: Comprehensive library of hooks and providers for data fetching and state interaction.
- **SSR Support**: Native pipeline for Java-backed Server-Side Rendering (SSR) with state dehydration and rehydration.
- **Unified Theming**: A robust design token system built on `styled-components` with automatic accessibility/contrast calculation.
- **Redux Integration**: Built-in modules for navigation, preferences, i18n, and resource caching.

## 📦 Installation

Install the library via npm, yarn, pnpm:

```bash
npm install @beinformed/ui
```

## 🚀 Quick Start

To use the library, wrap your application in the initialization client. This sets up the Redux store, handles routing, and enables rehydration.

```javascript
import { client } from "@beinformed/ui/react";

client({
  theme: { PRIMARY_COLOR: "#0055aa" },
  render: () => <MyApplication />,
});
```

And a server that is loaded in the Be Informed environment:

```javascript
import { serverNoSSR } from "@beinformed/ui/react";

export const server = (request: HttpServletRequestJava) => {
  setSettings(DEFAULT_SETTINGS);
  return serverNoSSR({
    request,
    render: () => <MyServer />,
  });
};
```

## 📖 Documentation

Detailed usage guides and API references are available to help you build your application:

- **[Initialization & SSR](./docs/usage/react-client.md)** – Setting up the client and server environments.
- **[Theming System](./docs/usage/react-theme.md)** – Using design tokens and styling utilities.
- **[React Hooks Cheat Sheet](./docs/usage/index.md)** – A quick reference for fetching data and models.
- **[Form & Attribute Handling](./docs/usage/forms.md)** – Managing complex state and submissions.

For comprehensive platform documentation, visit the [Be Informed Plaza](https://plaza.beinformed.com/).

## 💬 Questions & Feedback

We value your input!

- **Bugs & Features**: Please file an issue on our [Support Environment](https://support.beinformed.com).

---

© 2026 Be Informed. All rights reserved.

```

```