Box Kite MCP server

Box Kite

Box is a single React component with 235 typed CSS props. It generates the CSS for the values you pass at runtime and caches every rule by its content, so the same value anywhere in the app reuses one class — a project styles itself in TypeScript, with no CSS files to write and no class-name convention to remember.

Docs and live demos · Blog · Contributing · Support · Security · Releases

Built to be written by an AI. The rules, every prop with the CSS it emits and a docs folder are inside the package, generated from the prop registry itself — so what your agent reads is never a version behind what it is writing against: Built for AI · npx @box-kite/mcp · generative UI

Getting Started

1. Installation

npm install @box-kite/react

React 16.14 or newer, including 18 and 19 (both are covered by CI). TypeScript is optional but the props are typed for it.

Two packages ship, and a React project installs one of them:

@box-kite/core/types is where a project declares its own props and components — the augmentation target lives with the prop registry it extends, not with a binding.

1. Use it

Spacing counts in quarters of a rem: p={3} is 0.75rem, m={2} is 0.5rem. The example below is a box with margin: 0.5rem and padding: 1.75rem.

import Box from "@box-kite/react";

export default function Component(props: Props) {
  return (
    <Box className="custom-class" m={2} p={7}>
      basic example
    </Box>
  );
}

NOTE: the root font-size is 16px, so a quarter of a rem is 4px. Not every prop divides by four — fontSize divides by 16 (fontSize={14} is 0.875rem), and border widths and lineHeight are plain pixels (b={1} is 1px).

There is nothing to memorise, though: every prop's hover documentation carries a worked example of the CSS it writes — p={4} → padding: 1rem, fontSize={14} → font-size: 0.875rem — and those lines are generated by running the engine, so the editor cannot tell you a scale the library stopped using.

Colours

The palette is Tailwind's, in OKLCH: twenty-six families of eleven steps — slate-50 through rose-950, the four Tailwind 4.3 added (mauve, mist, olive, taupe) included — declared as CSS variables the first time a page asks for one. Any colour value takes an opacity modifier:

<Box bgColor="blue-500/40" borderColor="black/10" hover={{ bgColor: 'blue-500/60' }} />

Shortened. The full README is on GitHub.