@class-kit/react

React adapters for Class Kit.

React and React DOM are peer dependencies and are not bundled. Applications must provide react and react-dom version 18.2.0 or newer. An older React runtime prints a one-time console error asking the application to upgrade. All peer dependency ranges specify only their minimum supported version; newer major versions are not blocked by package metadata.

pnpm add react react-dom @class-kit/core @class-kit/react

For Vite projects, enable the on-demand plugin and keep imports short:

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import { classKitReact } from "@class-kit/react/vite";

export default defineConfig({
  plugins: [react(), classKitReact()],
});

For Webpack projects, use the matching plugin:

const { classKitReactWebpack } = require("@class-kit/react/webpack");

module.exports = {
  plugins: [classKitReactWebpack()],
};

import { Button, ClassConfigProvider } from "@class-kit/react";

The Vite and Webpack plugins rewrite named imports to component subpaths and inject matching component CSS. Without the plugin, import @class-kit/react/style.css once for full styles, or use @class-kit/react/components/* plus @class-kit/react/styles/components/*.css manually.

The default theme is minimal. ClassConfigProvider automatically loads a built-in theme and only activates its name after the stylesheet has loaded:

export function App() {
  return (
    <ClassConfigProvider theme="liquid-glass">
      {/* routes */}
    </ClassConfigProvider>
  );
}

No manual theme import or node_modules edit is required. Keep custom themes in the application's source tree, import them from the app entry, and scope their tokens with .cc-theme-<name> and [data-cc-theme="<name>"]. themeStylesheetHref remains available for apps that deliberately load a bundler-generated or CDN stylesheet URL at runtime.

Optional Peer Dependencies

QRCode and Barcode use optional peer dependencies:

pnpm add qrcode jsbarcode

Local Word and Excel preview also uses optional peer dependencies:

pnpm add mammoth xlsx

LeafletMap uses the optional leaflet peer dependency, version 1.9.4 or newer.

These libraries are optional so applications that do not use QRCode, Barcode, or local document previews do not need to ship them. If a feature is used without its optional dependency, Class Kit surfaces a runtime error that names the missing package and the supported CDN/global fallback.

Release Gate

Before publishing, run the workspace release gate:

pnpm release:check