@antscorp/ui

React >=19.2 views, Astryx, StyleX and the Antsomi theme through one facade. React and React DOM >=19.2 are supplied by the host as peers. The packaged CLI requires Node >=24.

bun add @antscorp/ui

import "@antscorp/ui/reset.css";
import "@antscorp/ui/astryx.css";
import "@antscorp/ui/theme.css";
import "@antscorp/ui/ui.css";
import { AddButton, AntsomiTheme } from "@antscorp/ui";

export function Example() {
  return (
    <AntsomiTheme>
      <AddButton label="Add" />
    </AntsomiTheme>
  );
}

StyleX consumers select antscorp-source and extract their own CSS instead of importing ui.css. See the repository README for source configuration, linked development and releases.

Localization

The host translates kit label/labels, descriptions and errors. Astryx-owned calendar, clear, search and status text uses InternationalizationProvider from the same facade:

import { getLocaleDirection, InternationalizationProvider } from "@antscorp/ui/astryx/i18n";
import arSA from "@antscorp/ui/astryx/locales/ar-SA.generated.js";

const locale = "ar-SA";
const dir = getLocaleDirection(locale);

// The host also sets <html dir={dir}>; this provider renders no DOM element.
<InternationalizationProvider locale={locale} messages={{ [locale]: arSA }} dir={dir}>
  <AntsomiTheme>{/* Views with host-translated labels. */}</AntsomiTheme>
</InternationalizationProvider>;

Keep the DOM dir and provider direction in sync. Use overrides for sparse, locale-keyed upstream text changes; missing translations fall back to English. DateTimeInput defaults to hourFormat="12h"; set hourFormat="24h" for a 24-hour clock. No second translation layer is needed.