Div (Deprecated)

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: JSON-authored pages. A kind:'html' page is written as constrained JSX text that the engine compiles (parses, never executes) into nodes, tag name straight through — there, the plain box tag is part of that tier's own vocabulary and stays fully supported, because no other spelling of it exists for an author to migrate to. The dev-build deprecation notice is therefore reported for JSON-authored nodes only, and never for what the html tier compiled from its own source.

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

Instead of using div, use these Shadcn alternatives:

For Card-like Containers → Use card

For Flex Layouts → Use flex

For Grid Layouts → Use grid

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
  body?: SchemaNode[];                    // Alternative content prop
  
  // Styling
  className?: string;                     // Tailwind CSS classes
  
  // Base properties
  id?: string;
  visible?: boolean | string | { dialect?: string; source: string };
  testId?: string;
}

Legacy Examples (For Reference Only)

Old Card Layout Example

Nested Containers