# Box Kite

> A React library built to be written by an AI: the rules and the whole prop reference ship inside the package, and the compiler checks every value.

Box Kite is `@box-kite/react` on npm, version 2.1.0. Every page below is served as markdown at the address given: append `.md` to any documentation URL. The files are converted from the pages themselves at build time, so they cannot fall behind what the site shows.

## Read this before writing any props

- **The dividers are per prop.** Spacing is ÷4 (`p={4}` is 1rem), `fontSize` is ÷16 (`fontSize={14}` is 14px), `borderRadius` is ÷4, and border width and `lineHeight` are direct px (`b={1}` is 1px).
- **There is no `style` attribute.** Every visual value is a prop; the one-off nothing has a prop for is `css={{ … }}`, which still compiles to a shared class.
- **The element comes from the component, not from `tag`.** `<Flex>`, `<Button>`, `<H1>`, `<Ul>`, `<Path>` — `<Box tag="…">` is the fallback, not the idiom.
- **HTML attributes go in `props`.** `<Link props={{ href: '/about' }}>`; an `href` written at the top level typechecks and is then dropped.

The whole rule set is in `AGENTS.md` inside the package (`node_modules/@box-kite/react/AGENTS.md`), and every prop with the CSS it writes is at https://www.box-kite.dev/props.md.

## Still working, no longer the spelling to write

- `placeholderStyles` — The name is `placeholder` now — this spelling still works and means the same thing.
- `hoverGroup` — `group={{ 'card/hover': … }}` — the same rule, and every other state beside it.
- `focusGroup` — `group={{ 'card/focus': … }}`.
- `activeGroup` — `group={{ 'card/active': … }}`.
- `disabledGroup` — `group={{ 'card/disabled': … }}`.
- `selectedGroup` — `group={{ 'card/selected': … }}`.
- `@box-kite/react/components/baseSvg` — Since SV3 every SVG element has a component, and `Svg` is this one without the presets: `<Svg viewBox="0 0 24 24" width="1.5rem">`.
- `@box-kite/react/components/dataGrid#onSelectionChange` — `onSelectedRowKeysChange` is the selection itself, with the `action` as a named reason — the spelling every component reports a change under.
- `@box-kite/react/components/dataGrid#onPageChange` — `onPaginationChange` reports both pager values with a reason, which is what says whether the page changed because the user navigated or because a filter reset it.
- `@box-kite/react/components/dataGrid#onPageSizeChange` — `onPaginationChange` covers it: a new page size always returns to page 1, so the two were never separate changes.
- `@box-kite/react/components/dataGrid#onSortChange` — `onSortingChange` reports the sort as one value with a reason beside it.
- `@box-kite/react/components/dropdown#onChange` — `onValueChange` is what every component reports a value change under, and it carries the reason — which is the thing a `(value, values)` pair cannot say.
- `@box-kite/react/components/radioGroup#onChange` — `onValueChange` is what every other component reports a value change under, and a group is not an `<input>` — this spelling still works and means the same thing.
- `@box-kite/react/components/select#onChange` — `onValueChange` is what every component reports a value change under, and it carries the reason.
- `@box-kite/react/components/semantics` — `MenuList` is this element now.

## Docs

- [Introduction](https://www.box-kite.dev/index.md): A React library built to be written by an AI: the rules and the whole prop reference ship inside the package, and the compiler checks every value.
- [Installation](https://www.box-kite.dev/installation.md): Install Box Kite and render your first Box: two dependencies, no bundler plugin, and no stylesheet to import.
- [Built for AI](https://www.box-kite.dev/ai-context.md): AGENTS.md, the whole prop reference and an MCP server that runs the real engine, all inside the package and generated from the prop registry itself.
- [Blocks](https://www.box-kite.dev/registry.md): Finished sections the shadcn CLI installs into your own repository: an invoices data grid, a settings form and a dashboard shell, each one code you then own.
- [Releases](https://www.box-kite.dev/releases.md): What changed in each version of Box Kite, written as it landed: new props and components, breaking changes with their migration notes, and fixes.
- [Theme Setup](https://www.box-kite.dev/theme-setup.md): Declare light and dark variants next to the styles they override, and switch them at runtime with Box.Theme.
- [React Server Components](https://www.box-kite.dev/server-components.md): Box renders on the server with no 'use client', no provider and no stylesheet to import. Its CSS is part of the HTML React streams.
- [Generative UI](https://www.box-kite.dev/generative-ui.md): A model composes the UI and the app still owns it: the catalog says what may be built, the renderer refuses the rest, and a colour stays a token.
- [Interop](https://www.box-kite.dev/interop.md): Four agentic runtimes describe a tool call and a tree of components in words of their own. The mapping, verified against each package.
- [Playground](https://www.box-kite.dev/playground.md): Edit a snippet, see it run against the real library, and read every CSS rule the engine wrote for it. Share the URL, or fork it into StackBlitz.
- [Showcase](https://www.box-kite.dev/showcase.md): Every component the library ships, on one page, drawn twice: a light theme and a dark one side by side, whatever theme you are reading in.
- [Box](https://www.box-kite.dev/box.md): The foundational component, from scratch: what a Box is, the five things that are not what you would guess, and all 235 props with the CSS each one writes.
- [Box functions](https://www.box-kite.dev/box-functions.md): Everything Box carries that is not a prop: Box.extend(), Box.components(), Box.keyframes(), Box.spring(), Box.Theme and Box.configure(), each with an example.
- [SVG](https://www.box-kite.dev/svg.md): Fourteen SVG paint and stroke properties as typed Box props — dashes, caps, joins, fill rules and a stroke that ignores the scale, all themeable.
- [Icon](https://www.box-kite.dev/icon.md): Box props on an icon somebody else drew — one adapter for lucide, Tabler, react-icons and a raw <svg>: sized on the ÷4 scale, themed, and named on purpose.
- [Charts](https://www.box-kite.dev/charts.md): Sparklines, progress rings, gauges and mini donuts as Boxes — no chart library — plus the container that themes a Recharts chart with the variables it reads.
- [Motion Showcase](https://www.box-kite.dev/motion.md): Springs, scroll-driven animation, view transitions and path drawing as typed props: six pieces of motion the browser runs, with no animation library.
- [State Variants](https://www.box-kite.dev/variants.md): Style by a data-* or aria-* attribute, by what an element contains, by where it sits among its siblings, or by what an ancestor or a sibling is doing.
- [Pseudo-Elements](https://www.box-kite.dev/pseudo-elements.md): before, after, placeholder, selection, marker and four more as nested props — with the content a generated element needs supplied for you.
- [Container Queries](https://www.box-kite.dev/container-queries.md): A component that answers to the space it was given rather than to the window: cq, six sizes and their complements, against the nearest container or a named one.
- [Anchor Positioning](https://www.box-kite.dev/anchor.md): A floating layer placed against its trigger by the browser: one hook, no measuring, and a measured fallback where the browser has none.
- [Right to Left](https://www.box-kite.dev/rtl.md): One dir attribute mirrors the whole page: logical sides, arrow keys that follow the reading order, and pinned grid columns that hold their edges.
- [Escape Hatch](https://www.box-kite.dev/escape-hatch.md): The css prop: a style object for the properties this library has no prop for, compiled into a shared class like every other prop — never an inline style.
- [Animation](https://www.box-kite.dev/animation.md): Keyframes, presets and transitions as typed props: Box.keyframes() takes Box props as its steps, and a preset stops on its own under reduced motion.
- [Button](https://www.box-kite.dev/button.md): A real button element with variants, sizes and states, styled entirely through Box props.
- [Textbox](https://www.box-kite.dev/textbox.md): A labelled text input for collecting user data, with the states and customization Box props give every element.
- [Textarea](https://www.box-kite.dev/textarea.md): A labelled multiline input for longer user data.
- [Checkbox](https://www.box-kite.dev/checkbox.md): A native checkbox that turns an option on, off or mixed, with the label markup included.
- [Radio Button](https://www.box-kite.dev/radiobutton.md): One choice out of a set. RadioGroup is the APG pattern — a named group, a shared field name, and arrow keys between options.
- [Switch](https://www.box-kite.dev/switch.md): An on/off control: a real checkbox input wearing role=switch, so screen readers say on and off and forms still submit it.
- [Tooltip](https://www.box-kite.dev/tooltip.md): A description that appears on hover and on focus, wired to its trigger with aria-describedby — the APG tooltip, WCAG 1.4.13 rules included.
- [Popover](https://www.box-kite.dev/popover.md): A panel anchored to its trigger on the platform's Popover API: top layer, light dismiss and focus return, with no portal and no z-index.
- [Dialog](https://www.box-kite.dev/dialog.md): A modal dialog on the native <dialog> element: the top layer, the backdrop, an inert page, Escape and focus containment are the browser's.
- [Menu](https://www.box-kite.dev/menu.md): A menu button and its menu on the Popover API: APG's roles and keys, submenus as nested popovers, and no portal or focus trap.
- [Accordion](https://www.box-kite.dev/accordion.md): APG's accordion and the disclosure under it, whose height animation is a shared class rather than a measured pixel.
- [Slider](https://www.box-kite.dev/slider.md): APG's slider and its multi-thumb sibling: the value's own shape decides how many thumbs there are, and the geometry is logical.
- [Progress](https://www.box-kite.dev/progress.md): A progress bar that reports the value it really has, sweeps when there is none, and renders on a server with no JavaScript.
- [Toaster](https://www.box-kite.dev/toaster.md): Toasts in the top layer with no portal: one live region that was there before its content, and timers that stop on hover, on focus and off screen.
- [Combobox](https://www.box-kite.dev/combobox.md): APG's editable combobox over your own rows: the value is the object, the filter composes, and the selection can be chips.
- [Tabs](https://www.box-kite.dev/tabs.md): The APG tabs pattern: one list of tabs over one panel at a time, selection following focus, and arrows that follow the reading order.
- [Overlay](https://www.box-kite.dev/overlay.md): A layer rendered where it is declared, in the top layer, so it escapes overflow: hidden, clipped ancestors and stacking contexts.
- [Dropdown](https://www.box-kite.dev/dropdown.md): The APG select-only combobox: choose one option or many, from the keyboard as well as the mouse.
- [Agent](https://www.box-kite.dev/agent.md): An agent's turn in components: the tool call, the reasoning, the approval — and the text, the markdown and the skeleton it answers with.
- [Dashboard](https://www.box-kite.dev/dashboard.md): A dashboard people rearrange and a model can write: the layout is JSON in cells, and a widget's place is a class rather than a measured pixel.
- [Data Grid](https://www.box-kite.dev/datagrid.md): A virtualized data grid with sorting, filtering, grouping, column resizing and full keyboard navigation.
- [Benchmark](https://www.box-kite.dev/benchmark.md): A hundred thousand rows by twenty columns, measured in your own browser: first render, scroll frames, filter, sort and grouped totals.
- [Flex](https://www.box-kite.dev/flex.md): A shortcut component for display: flex, with alignment, direction and spacing props.
- [Grid](https://www.box-kite.dev/grid.md): A shortcut component for display: grid, with template, gap and placement props.
- [Style Grouping](https://www.box-kite.dev/style-grouping.md): Group several CSS properties under a single prop, each with its own value. One prop, one class name, many declarations.
- [Colors](https://www.box-kite.dev/colors.md): The complete colour palette in OKLCH — twenty-six families of eleven steps — and the opacity modifier every colour value takes.
- [Gradients & Effects](https://www.box-kite.dev/gradients-shadows.md): A gradient written as a value, with palette tokens for stops — plus the shadow layers, filter functions and masks that stack instead of overwriting each other.

## Reference

- [Every prop](https://www.box-kite.dev/props.md): all of them, the CSS each writes, and one example measured from the engine rather than quoted from a doc.
- [The skill](https://www.box-kite.dev/skill.md): the rules, the measured dividers and what to read next, as an Agent Skill — `npx skills add box-kite/box-kite` installs it, and this address is the same file.
- [The Cursor rule](https://www.box-kite.dev/box-kite.mdc): the same rules as a `.mdc` for `.cursor/rules/`.

## Optional

- [llms-full.txt](https://www.box-kite.dev/llms-full.txt): every page above in one file. Fetch the page you need instead — this is here for a tool that indexes a whole site, not for a prompt.
- [Box Kite 2.1.0](https://www.box-kite.dev/releases/2.1.0.md): A model can compose the UI now, and the app still owns it.
- [Box Kite 2.0.1](https://www.box-kite.dev/releases/2.0.1.md): The release pipeline publishes to npm again, and signs what it publishes.
- [Box Kite 2.0.0](https://www.box-kite.dev/releases/2.0.0.md): The package now carries instructions for the agent writing the code, the documentation site answers in markdown, the same rules install as a skill in about f…
- [Box Kite 1.0.0](https://www.box-kite.dev/releases/1.0.0.md): @cronocode/react-box is Box Kite now.