@logicplanes/kaeso-ui

Kaeso's UI library: React 19 components on Base UI, styled with Tailwind CSS v4 and the Kaeso tokens. Every Kaeso interface is built from it. Its showcase at ui.kaeso.app shows every component live, with its props.

Install

pnpm add @logicplanes/kaeso-ui react react-dom @hugeicons/react @hugeicons/core-free-icons

With Tailwind CSS v4:

@import "tailwindcss";
@import "@logicplanes/kaeso-ui/tailwind.css";

Without Tailwind, import the prebuilt stylesheet once: import "@logicplanes/kaeso-ui/styles.css";

import { ThemeProvider, TooltipProvider, Toaster, Button } from "@logicplanes/kaeso-ui";

export function App() {
  return (
    <ThemeProvider>
      <TooltipProvider>
        <Button variant="primary">Create key</Button>
        <Toaster />
      </TooltipProvider>
    </ThemeProvider>
  );
}

Every component is also its own import, such as @logicplanes/kaeso-ui/button; the charts are under @logicplanes/kaeso-ui/charts/*, the parts Kaeso's own interfaces share, such as the rights matrix and the conversation view, under @logicplanes/kaeso-ui/kaeso/*, and the helpers under /format, /theme, /i18n and /utils.

Installation, theming and every component: ui.kaeso.app.

For agents

The package ships its rules in AGENTS.md. Load them in your project so every agent follows them: add @node_modules/@logicplanes/kaeso-ui/AGENTS.md to your CLAUDE.md, or tell agents in your AGENTS.md to read node_modules/@logicplanes/kaeso-ui/AGENTS.md. The registry of every component and prop is in @logicplanes/kaeso-ui/ai/component-registry.md (and .json); online as ui.kaeso.app/components.json, and with the rules as plain text at ui.kaeso.app/llms.txt.

License

MIT. The Kaeso name and logo are not covered by the license. Inter and Geist Mono are bundled under the SIL Open Font License 1.1; see NOTICE.md.