ObjectUIDiv (Deprecated)
Generic container element - use Shadcn components instead
⚠️ Deprecated Component
The Div component is deprecated. Please use Shadcn components instead:
- For a plain wrapper: use
box— the one drop-in swap (same element, your className verbatim, no layout of its own) - When you want their layout: use
card,flex,container,stack, orgrid— each injects classes of its own, andcardalso moves children into an extra element
Move any content authored under the retired body key into children first:
objectui#6771 retired that child-list spelling, so validation refuses it by name, and neither
div nor any replacement listed above draws it.
The Div component is a generic container element. It is now deprecated in favor of semantic Shadcn-based components that provide better accessibility, consistency, and design system integration.
Scope of this deprecation: both authoring surfaces. A kind:'html' page is written
as constrained JSX text that the engine compiles (parses, never executes) into nodes,
tag name straight through. On that tier <div> is refused: the page fails to
compile, and the error names box as the replacement. os validate gives the same
verdict, since the published manifest does not declare div for the html tier, but its
refusal is a plain forbidden-tag error that does not name box. Author <box> on an
html page exactly where you would author box in JSON. The
dev-build deprecation notice covers JSON-authored nodes, and the compile error covers
html pages.
Styling on that tier is the blocks' own structured props (<flex direction gap>,
<grid columns>) plus a JSON style object — not Tailwind utility classes, which
produce no CSS at all when authored in page source. os validate reports that as
page-source-className-tailwind. See the React Pages guide, §Styling.
Migration Guide
Which replacement is right depends on whether you want layout or only a wrapper.
Measured through the real renderer, on a node carrying an authored className:
box reproduces div exactly, while card, flex, container, stack and
grid each add classes of their own — and card additionally moves the children
inside an extra element. So a mechanical div → card/flex/grid swap changes
the page; a div → box swap does not.
One caveat for a node still authored in the retired body spelling: every
option reads children and never body (objectui#6771 retired it across the
protocol, card included), and so does div itself. Such a node must move that
content into children as part of the swap. Until it does, validation refuses
the key by name, and the content is missing from the page under div and under
every replacement alike.
For a Plain Wrapper → Use box
The mechanical swap. box renders children inside a plain block element with
your className passed through verbatim and nothing injected, so retyping a
div node to box is the one conversion that leaves the rendered result alone.
Use Box Instead
For Card-like Containers → Use card
Use Card Instead
For Flex Layouts → Use flex
Flex Layout
For Grid Layouts → Use grid
Grid Layout
Old Examples (Deprecated)
Below are the old div examples. Please migrate to the alternatives shown above.
Schema
// ⚠️ DEPRECATED - Use Card, Flex, Grid, or other layout components instead
interface DivSchema {
type: 'div';
// Content
children?: SchemaNode | SchemaNode[]; // Child components (the child key this component reads)
// Styling
className?: string; // Tailwind CSS classes
// Base properties
id?: string;
visible?: boolean | string | { dialect?: string; source: string };
testId?: string;
}