@beinformed/ui

@beinformed/ui provides the core infrastructure and high-level React building blocks for applications powered by Be Informed 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:

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.

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

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

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

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 – Setting up the client and server environments.
• Theming System – Using design tokens and styling utilities.
• React Hooks Cheat Sheet – A quick reference for fetching data and models.
• Form & Attribute Handling – Managing complex state and submissions.

For comprehensive platform documentation, visit the Be Informed Plaza.

💬 Questions & Feedback

We value your input!

• Bugs & Features: Please file an issue on our Support Environment.

© 2026 Be Informed. All rights reserved.