@bettercms-ai/kit

The BetterCMS V2 Block Kit: the schema language, the form engine that draws the Visual Editor's dock, its controls, and the design tokens. React 19, Base UI.

npm i @bettercms-ai/kit @base-ui/react @tabler/icons-react framer-motion react react-dom

Styles

• Tailwind v4 app: import the tokens and the utility names after Tailwind.

  @import "tailwindcss";
  @import "@bettercms-ai/kit/theme.css";
  @import "@bettercms-ai/kit/tokens.css";
  @source "../node_modules/@bettercms-ai/kit/dist";
  

• No Tailwind (a custom dock input's iframe): import "@bettercms-ai/kit/styles.css", a precompiled sheet with the tokens and every utility the kit uses. Never import it next to your own Tailwind sheet.

Theme

import { KitRoot, applyScheme } from "@bettercms-ai/kit/theme";

applyScheme(document.documentElement, "dark"); // .dark on <html>: portalled layers follow it
<KitRoot>{/* kit components */}</KitRoot>;

Imports

@bettercms-ai/kit re-exports the engine, the controls and the UI primitives. Every module is also importable by path, e.g. @bettercms-ai/kit/ui/button, @bettercms-ai/kit/schema/scale.