Getting Started

Installation

Migrating

Theme Setup

Server Components

Core

Components

Layout

Extensions

Resources

Theme

Migrating to Box Kite

1.0.0

The library was published as @cronocode/react-box until 1.0.0. Same API, new name — for most projects the move is one find-and-replace.

The move

Install the new package

Terminal

npm uninstall @cronocode/react-box
npm install @box-kite/react

Then replace the specifier across your source. /rsc, /a11y, /ssg and every /components/* import resolve exactly as before — only the prefix changes.

@cronocode/react-box

@box-kite/react

@cronocode/react-box/components/flex

@box-kite/react/components/flex

Two moved further than that. The engine is published on its own now, so an app with no React installs @box-kite/core instead of a React library — and the types go with it, because they are derived from the prop registry rather than from any binding. @box-kite/react depends on @box-kite/core, so installing the React package still gets you both.

@cronocode/react-box/core

@box-kite/core

@cronocode/react-box/types

@box-kite/core/types

You do not have to do it today. @cronocode/react-box@3.4.0 is a compatibility bridge: every entry re-exports the new package, so an npm update cannot break a build that has not migrated. It is deprecated on npm and receives no further changes.

Three things the bridge cannot forward

If your project does any of these, the find-and-replace is not enough — these are the whole of the breaking surface in 1.0.0.

1. Type augmentation

TypeScript augments the module you name, and a re-export cannot pass that through. If you extend the prop types with Box.extend(), change the declare module string by hand:

JSX

// before
declare module '@cronocode/react-box/types' { … }

// after
declare module '@box-kite/core/types' { … }

2. Two DOM ids

Both are documented debugging landmarks, so anything selecting them — a test, a global stylesheet, a screenshot script — needs updating.

<style id="crono-styles">

<style id="box-kite-styles">

#crono-box

#box-kite-portal

3. The warning prefix

The runtime logs [box-kite] where it logged [react-box]. It matters only if you assert on it.

What did not change

Everything else. The rename is a name, not a redesign:

Box and every API on it — Box.extend(), Box.components(), Box.keyframes(), Box.spring(), Box.Theme, Box.configure()
all 212 props, their values and their numeric dividers
every pre-built component, and the entry each one is imported from
the generated class names and the atomic prefixes, so a snapshot of your CSS is unaffected
the React peer range, the exports map and the react-server condition