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, and layout primitives. Typed communication between embedded pages, configurators, and Senler is provided by the separate @senlerio/bridge package, which does not require React or the UI library.

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

Installation

Install the published version directly from GitHub with a fixed tag for repeatable builds:

npm install https://github.com/SenlerBot/senler-ui/archive/refs/tags/v0.7.2.tar.gz
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 "@senlerio/ui/styles.css";
import "@senlerio/ui/themes/senler.css";

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

@import "tailwindcss";
@import "@senlerio/ui/fonts.css";
@import "@senlerio/ui/tailwind.css";
@import "@senlerio/ui/themes/senler.css";
@source "../node_modules/@senlerio/ui/dist";

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

themes/senler.css enables the shared Senler palette, including dark theme colors. Applications with their own palette can omit this import. The application or Senler Bridge selects the mode: the .dark class on the root element activates dark colors.

The @source path is relative to the CSS file: this example assumes src/styles.css. It ensures that Tailwind includes the installed library's component classes.

Using components

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

import { Button, Input } from "@senlerio/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 @senlerio/ui/atoms/*, @senlerio/ui/compound/*, and @senlerio/ui/layout/* paths for narrower imports.

Embedded application page

For an interface opened inside Senler, use @senlerio/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.

Install Bridge separately:

npm install https://github.com/SenlerBot/senler-bridge/archive/refs/tags/v1.0.1.tar.gz

import "@senlerio/ui/browser-compat";
import { createSenlerBridgeClient } from "@senlerio/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 @senlerio/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.