East UI Components

React rendering components for East UI

East UI Components provides React components that render East UI data structures. It bridges the gap between East UI's declarative component definitions and interactive React applications using Chakra UI v3.

Features

• Chakra UI v3 - Modern, accessible component rendering
• All East UI Components - Full support for layout, forms, charts, overlays, and more
• State Management - React hooks for East state operations
• Recharts Integration - Charts rendered using Recharts library
• Type-Safe - Full TypeScript support

Installation

npm install @elaraai/east-ui-components @elaraai/east-ui @elaraai/east

Quick Start

import React from "react";
import { Provider } from "@chakra-ui/react";
import { East } from "@elaraai/east";
import { Stack, Text, Button, UIComponentType } from "@elaraai/east-ui";
import { EastUIComponent, system } from "@elaraai/east-ui-components";

// Define your East UI component
const MyUI = East.function([], UIComponentType, $ => {
    return Stack.Root([
        Text.Root("Hello from East UI!", { fontSize: "xl" }),
        Button.Root("Click Me", { variant: "solid", colorPalette: "blue" }),
    ], { gap: "4" });
});

// Compile and get the UI IR
const compiled = East.compile(MyUI);
const uiData = compiled();

// Render in React
function App() {
    return (
        <Provider value={system}>
            <EastUIComponent ir={uiData} />
        </Provider>
    );
}

Brand fonts

The theme sets text in DM Sans, Inter Tight and Chivo Mono. An app registers them once, in its entry module:

import "@elaraai/east-ui-components/fonts";

The entry imports the self-hosted @fontsource-variable/* stylesheets — the three families upright, and Chivo Mono italic for the muted "no data" value. The app's bundler emits them with their .woff2 files, in a dev server and in a production build, and nothing is fetched from a CDN. The fonts are a separate entry so that importing the components never needs a CSS loader, which Node test runners lack.

No letters are joined: the page sets font-variant-ligatures: no-common-ligatures, so ff, fi and fl stay separate letters in every face, and each of Chivo Mono's letters keeps its own cell.

Theme

system is the design system as a Chakra v3 system. Wrap the app in <ChakraProvider value={system}>, and Chakra's own parts take it as well as the East components.

Brand is the default colour palette. A part with no colorPalette takes the brand, so a <Button> is the design system's primary in both themes: its fill, a label at 4.5:1 or more, and a deeper fill on hover. A checked <Switch> has the brand track. Parts the design system draws neutral stay neutral, held so in their own recipes: tags, badges, avatars, key caps, code chips, tabs, table rows, progress tracks, and every button that isn't the primary (outline, ghost, subtle, surface, plain). A colorPalette prop on a part, or on an ancestor of a part that doesn't pin its own, still selects another palette.

A composite field draws its focus ring on the bordered wrapper with _focusWithin: { borderColor: "brand.solid", boxShadow: "focus", outline: "none" }. Its inner editing field must opt out of both Chakra's ring and the theme's universal :focus-visible shadow:

import type { SystemStyleObject } from "@chakra-ui/react";

const fieldInRingedControl = {
    focusVisibleRing: "none",
    _focusVisible: { outline: "none", boxShadow: "none" },
} satisfies SystemStyleObject;

Spread this into the inner field's slot recipe. outline: "none" alone leaves a second shadow, even on a mouse click into a text input. If Chakra's default variant supplies focus styles, put the opt-out in that variant: merged variant styles override custom base styles. The theme uses the shared fieldInRingedControl and the combobox outline variant demonstrates that placement.

Keep the opt-out scoped to fields whose wrapper supplies the ring. Standalone inputs and independently focusable actions, such as a search's clear button, still need their own focus indicator. Segmented dates and times retain the active segment's fill and border inside the wrapper. Verify custom composites in a real browser, in both themes and with both mouse and keyboard focus: the wrapper's computed box-shadow must equal the focus token and the inner field's must be none.

State Management

East UI Components provides hooks for managing state in East applications:

import { useEastStore, useEastState } from "@elaraai/east-ui-components";
import { State } from "@elaraai/east-ui";

// In your East function
const MyComponent = East.function([], UIComponentType, $ => {
    const count = $.let(State.read("counter", IntegerType, 0n));
    return Button.Root(
        East.str`Count: ${count}`,
        { onClick: State.write("counter", count.add(1n)) }
    );
});

// In your React app
function App() {
    const store = useEastStore();
    const [count] = useEastState(store, "counter", 0n);

    return (
        <Provider value={system}>
            <EastUIComponent ir={uiData} store={store} />
            <p>Current count: {count}</p>
        </Provider>
    );
}

Supported Components

All East UI components are supported:

Development

npm run build     # Build library
npm run dev       # Start development server
npm run lint      # Check code quality

Claude Code plugin

The East ecosystem also ships a Claude Code plugin — East language skills, example search, and preemptive diagnostics for East code — installed separately from the elaraai marketplace:

# Inside Claude Code
/plugin marketplace add elaraai/east-workspace
/plugin install east@elaraai

# From a terminal
claude plugin marketplace add elaraai/east-workspace
claude plugin install east@elaraai

License

Dual-licensed:

• Open Source: AGPL-3.0 - Free for open source use
• Commercial: Available for proprietary use - contact [email protected]

Ecosystem

• East: Statically typed, expression-based language with serializable IR. Run portable logic across TypeScript, Python, C, and other runtimes.

  • @elaraai/east: Core language SDK with type system, expressions, and reference JS compiler

• East Node: Node.js platform functions for I/O, databases, and system operations.

  • @elaraai/east-node-std: Console, FileSystem, Fetch, Crypto, Time, Path, Random
  • @elaraai/east-node-io: SQLite, PostgreSQL, MySQL, MongoDB, Redis, S3, FTP, SFTP, XLSX, XML, compression
  • @elaraai/east-node-cli: CLI for running East IR programs in Node.js

• East C: C11 native runtime for executing East IR. Tarballed for linux-x64 and linux-arm64, attached to each GitHub Release.

  • east-c: Core runtime — type system, IR interpreter, 200+ builtins, serialization (Beast2, JSON, CSV, East text)
  • east-c-std: Console, FileSystem, Fetch, Crypto, Time, Path, Random
  • east-c-cli: CLI for running East IR programs natively

• East Python: Python runtime, standard platform, I/O, and data-science platform functions. Published to PyPI.

  • east-py: Core Python runtime — type system, IR compiler, 212+ builtins, Cython-accelerated hot paths
  • east-py-std: Console, FileSystem, Fetch, Crypto, Time, Path, Random
  • east-py-io: SQLite, PostgreSQL, MySQL, MongoDB, Redis, S3, FTP, SFTP, XLSX, XML, compression
  • east-py-cli: CLI for running East IR programs in Python
  • east-py-datascience (PyPI) + @elaraai/east-py-datascience (npm): Optimization (MADS, Optuna, ALNS, GoogleOR), ML (XGBoost, LightGBM, NGBoost, PyTorch, Lightning, GP), Bayesian inference (PyMC), explainability (SHAP), conformal prediction (MAPIE)

• East UI: Typed UI component definitions and React renderer, plus VS Code preview.

  • @elaraai/east-ui: 50+ typed UI components for layouts, forms, charts, tables, dialogs
  • @elaraai/east-ui-components: React renderer with Chakra UI v3 styling
  • @elaraai/e3-ui: e3 + UI bridge — Data bindings, e3.ui() task, manifest
  • @elaraai/e3-ui-components: React Query hooks and preview components for the e3 API
  • @elaraai/e3-ui-cli: Browse an e3 repository in the terminal (e3-ui [repo]), and render east-ui / e3-ui components to PNG (e3-ui shot)

• e3 — East Execution Engine: Durable execution engine for running East pipelines at scale. Git-like content-addressable storage, automatic memoization, reactive dataflow, real-time monitoring.

  • @elaraai/e3: SDK for authoring e3 packages with typed tasks and pipelines
  • @elaraai/e3-core: Object store, dataflow orchestrator, execution state
  • @elaraai/e3-types: Shared type definitions for e3 packages
  • @elaraai/e3-cli: e3 repo, e3 package, e3 workspace, e3 dataflow run, e3 watch, e3 task logs commands
  • @elaraai/e3-api-client: HTTP client for remote e3 repositories
  • @elaraai/e3-api-server: REST API server for e3 repositories
  • @elaraai/e3-api-tests: Shared API compliance test suites

Links

• Live Showcase: https://elaraai.github.io/east-ui/
• Website: https://elaraai.com/
• East UI: https://www.npmjs.com/package/@elaraai/east-ui
• East Repository: https://github.com/elaraai/east-workspace/tree/main/libs/east
• Issues: https://github.com/elaraai/east-workspace/issues
• Email: [email protected]

About Elara

East is developed by Elara AI Pty Ltd, an AI-powered platform that creates economic digital twins of businesses that optimize performance. Elara combines business objectives, decisions and data to help organizations make data-driven decisions across operations, purchasing, sales and customer engagement, and project and investment planning. East powers the computational layer of Elara solutions, enabling the expression of complex business logic and data in a simple, type-safe and portable language.

Developed by Elara AI Pty Ltd.

Developed by Elara AI Pty Ltd - Powering the computational layer of AI-driven business optimization.