React & Next.js

Paste it like markup

A KATA part is HTML, CSS and, when it behaves, one plain script. Inside a React component the HTML goes in as JSX: rename class to className, for to htmlFor, and camelCase the SVG attributes — the same renames as any pasted markup. Nothing else about the part changes, because there was never anything framework-specific in it.

export function EmptyState() {
  return (
    <div className="k-card">
      <div className="k-card-h">No projects yet</div>
      <div className="k-card-b">
        <p>Your first project is one paste away.</p>
        <button className="btn btn-pri btn-md" type="button">New project</button>
      </div>
    </div>
  );
}

The CSS is the other half of the part. It is global by design — import it once, at the app root, and every component shares the same mold.

Load the CSS once

Tokens first, then the parts you use — or the one-file bundle while you are evaluating. Fetch the files with the CLI (add writes each part and its dependencies) or copy them from the part pages:

import './kata/tokens.css';
import './kata/button.css';
import './kata/card.css';

Do not scope KATA CSS inside a component. The parts expect the tokens on the page, the way a stylesheet expects a document.

The JS parts

A part’s script finds its root by a data attribute and initializes what it finds, keeping its state in the DOM. The bundle does this for everything on the page at load, so parts rendered with the page initialize like anywhere else. A part that mounts later — a dialog opened after client-side navigation — needs its script run once its markup exists. The per-part files are small, plain and safe to run from an effect:

useEffect(() => {
  const s = document.createElement('script');
  s.src = '/kata/dialog.js';
  document.body.appendChild(s);
}, []);

Most of the catalog needs no script at all: Accordion is native details, Switch and Rating are real inputs, the charts are SVG. The scripted parts are the overlays, pickers and rich inputs — and each names its no-JS fallback on its own page.

Next.js, specifically

Server Components render KATA markup unchanged — it is HTML on its way to the browser. Load the CSS in the root layout, the bundle with next/script, and client components use the same parts wherever they render:

// app/layout.tsx
import Script from 'next/script';

<link rel="stylesheet" href="/kata/tokens.css" />
<link rel="stylesheet" href="/kata/kata-ui.css" />
<Script src="/kata/kata-ui.js" strategy="afterInteractive" />

App Router and Pages Router behave the same here, for the same reason: neither is doing anything to the markup.

Islands are the natural fit

Astro’s model — HTML first, JavaScript only where a part behaves — is the ground KATA was cast for: static parts ship zero JS and interactive ones carry their own small script. The Astro install guide walks it end to end. The same applies in miniature to islands inside other frameworks: a KATA part is an island that never needed the word.

Honest limits

KATA is not a React library, and this page is not a claim that it replaces one. If a screen’s state is the product — a spreadsheet grid, a shared canvas, a wizard whose every step depends on the last — a framework earns its keep, and you should use it, with KATA’s tokens and CSS still welcome inside. Where React is ceremony around what is mostly a document — pages, forms, dashboards, settings, checkout — the parts paste in and the ceremony becomes optional.

A fair number of teams will run both: the framework inside the product, KATA on everything around it.

More docs

Introduction · Getting Started · CLI · Theming · Dark Mode · Accessibility · Installation · Plain HTML · Astro · Laravel · JavaScript · Guide: Building a Dashboard · Guide: Building a Settings Page · Guide: Building a Pricing Page · Guide: Sign-in & Account Pages · Guide: Forms, For Real · Guide: Data Tables That Survive Real Data · AI Prompts · Why Vanilla · The Mold · Anatomy of a Part · Coming from Tailwind · KATA vs shadcn/ui · FAQ · Registry · Forms · MCP Server · RTL · Contributing · Changelog