Senler UI

Summary

Senler UI is a React 19 library for interfaces compatible with Senler. It provides shared styles and design tokens, form, button, table, dialog, and menu components, layout primitives, and the typed Senler Bridge for embedded application pages and configurators.

Use the library when an application interface should look and behave consistently with Senler. Application authorization and API access are configured separately: Senler UI only covers the interface and communication between an embedded page and its parent window.

Installation

Install the current version directly from GitHub. On the first install npm resolves the current default branch, while package-lock.json records the exact commit for repeatable builds:

npm install github:SenlerBot/senler-ui
npm install react@^19 react-dom@^19 lucide-react

Connecting styles

If Senler UI owns all application styles, import the prebuilt stylesheet once in the application entry point:

import "@senler/ui/styles.css";

If the application already builds its own Tailwind CSS, add the integration to the main CSS file after tailwindcss:

@import "tailwindcss";
@import "@senler/ui/fonts.css";
@import "@senler/ui/tailwind.css";

Choose one of these approaches. Loading both the complete styles.css and a custom Tailwind build produces duplicate styles.

Using components

Import components from the package root and compose the interface from regular React components:

import { Button, Input } from "@senler/ui";

export function ContactForm() {
  return (
    <form>
      <Input name="email" type="email" placeholder="Email" />
      <Button type="submit">Save</Button>
    </form>
  );
}

Check component names, display variants, and working examples in Storybook. The library also provides @senler/ui/atoms/*, @senler/ui/compound/*, and @senler/ui/layout/* paths for narrower imports.

Embedded application page

For an interface opened inside Senler, use @senler/ui/bridge instead of direct window.postMessage calls. The Bridge validates the parent origin, provides the initial language and theme, reports their changes without reloading the iframe, and synchronizes the page height when the container supports resizing.

import "@senler/ui/browser-compat";
import { createSenlerBridgeClient } from "@senler/ui/bridge";

const bridge = createSenlerBridgeClient({
  parentOrigin: "https://senler.io",
});

bridge.onContextChange(({ ui }) => {
  // ui.language: "ru" | "en"
  // ui.theme: "light" | "dark"
});

await bridge.connect();

Height synchronization is enabled by default: the Bridge observes document changes and reports the new height to the Cabinet. The inline automation-step form uses this behavior, for example. Set syncFrameSize: false only for an intentionally fixed-height iframe.

Import @senler/ui/browser-compat before application code. OAuth and the signed launch session remain the authorization boundary: do not pass Senler tokens or application secrets through the Bridge. See Embedded page for iframe configuration.

Source code and Storybook

• Senler UI source code and setup instructions
• Senler UI Storybook — a component catalog with examples, states, and available properties.