@x12i/knowx-ui

Embeddable KnowX screens. Wrap them in KnowxProvider and a React Router.

import { createKnowxClient } from "@x12i/knowx-sdk";
import { KnowxProvider, KnowxOverview, KnowxBrowse } from "@x12i/knowx-ui";
import "@x12i/knowx-ui/styles.css";

const client = createKnowxClient({
  orgId: "acme",
  caller: "acme-app",
  knowxUrl: "http://127.0.0.1:5110",
  memorixUrl: "http://127.0.0.1:5100",
});

<KnowxProvider
  client={client}
  theme={{
    fontFamily: "Inter, sans-serif",
    headingFontFamily: "Inter, sans-serif",
    fontSize: "14px",
    background: "#0f1115",
    surface: "#171a21",
    text: "#f4f6fb",
    muted: "#9aa3b2",
    border: "#2c3340",
    accent: "#6d5efc",
    accentHover: "#5b4de0",
    accentSoft: "#2a2550",
    onAccent: "#ffffff",
    radius: "6px",
  }}
>
  <KnowxOverview />
</KnowxProvider>

theme accepts any subset. Unset fields keep KnowX defaults. cssVars sets any --kx-* variable the stylesheet uses (--kx-font, --kx-bg, --kx-surface, --kx-ink, --kx-accent, --kx-radius, and the status colors). className and style land on the same wrapper. Styles stay inside .kx-theme, so the host page keeps its own body styles.

Components: KnowxOverview, KnowxSources, KnowxBrowse, KnowxUpload, KnowxWrite, KnowxActivity, KnowxItems, KnowxItemDetail, KnowxAssociations, KnowxOverlaps, KnowxContradictions, KnowxTrash, KnowxSearch, KnowxSettings.