Box

Neutral block container — authored classes pass through verbatim, nothing is injected

The Box component is the neutral block container: it renders its children inside a single block element, emits the className you author verbatim, and injects zero classes of its own.

Reach for box when you want a styled wrapper or a plain grouping element and the other layout components would add layout you did not ask for:

container injects width, centering and responsive padding
flex / stack inject a flex display mode and gaps
grid injects a grid display mode and columns
card injects border, background and shadow, and wraps content in a card body

If you want those semantics, use those components — they are the right tool for flex rows, grids and cards. box is for the case where the box itself should contribute nothing but your own classes.

box replaces the deprecated div component on the JSON authoring surface.

Examples

Styled wrapper

Basic Box

A neutral block container: authored classes pass through verbatim, nothing is injected.

Pure grouping

Nested Boxes

Boxes nested for pure grouping — each level shows only its own authored classes.

Schema

import type { SchemaNode } from '@object-ui/types';

interface BoxSchema {
  type: 'box';

  // Content — `children` is the ONLY content channel
  children?: SchemaNode | SchemaNode[];

  // Styling — passed through verbatim, never merged with injected classes
  className?: string;

  // Base properties
  id?: string;
  visible?: boolean | string | { dialect?: string; source: string };
}

Migrating from `div`

box is a drop-in replacement for a JSON-authored div, with one deliberate difference: box reads children only. The old div renderer fell back to body when children was absent; a div node authored with body must move that content into children when it becomes a box:

{
  "type": "box",
  "className": "flex-1 p-4",
  "children": [
    { "type": "text", "content": "Main content area" }
  ]
}

A kind:'html' page is unaffected: the plain div tag is permanent, first-class vocabulary of that tier and compiles straight through.

Box