Div (Deprecated)

⚠️ Deprecated Component

The Div component is deprecated. Please use Shadcn components instead:

For containers: use card, flex, or semantic layout components
For simple wrappers: use layout components like container, stack, or grid

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.

Migration Guide

Instead of using div, use these Shadcn alternatives:

For Card-like Containers → Use `card`

Use Card Instead

{
  "type": "card",
  "children": [
    {
      "type": "text",
      "content": "Card Title",
      "className": "text-2xl font-semibold"
    },
    {
      "type": "text",
      "content": "Card content with proper semantic structure.",
      "className": "text-sm text-muted-foreground mt-2"
    }
  ]
}

For Flex Layouts → Use `flex`

Flex Layout

{
  "type": "flex",
  "gap": 4,
  "children": [
    {
      "type": "card",
      "className": "w-20 h-20 bg-blue-500"
    },
    {
      "type": "card",
      "className": "w-20 h-20 bg-green-500"
    },
    {
      "type": "card",
      "className": "w-20 h-20 bg-purple-500"
    }
  ]
}

For Grid Layouts → Use `grid`

Grid Layout

{
  "type": "grid",
  "cols": 2,
  "gap": 4,
  "children": [
    {
      "type": "card",
      "className": "h-20 bg-red-500"
    },
    {
      "type": "card",
      "className": "h-20 bg-yellow-500"
    },
    {
      "type": "card",
      "className": "h-20 bg-pink-500"
    },
    {
      "type": "card",
      "className": "h-20 bg-indigo-500"
    }
  ]
}

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;
  testId?: string;
}

Legacy Examples (For Reference Only)

Old Card Layout Example

Custom Card

{
  "type": "div",
  "className": "max-w-sm rounded-lg border bg-card text-card-foreground shadow-sm",
  "children": [
    {
      "type": "div",
      "className": "p-6 space-y-2",
      "children": [
        {
          "type": "text",
          "content": "Card Title",
          "className": "text-2xl font-semibold"
        },
        {
          "type": "text",
          "content": "Card description goes here. This is a basic card layout using div containers.",
          "className": "text-sm text-muted-foreground"
        }
      ]
    }
  ]
}

Nested Containers

Nested Divs

{
  "type": "div",
  "className": "p-6 border-2 border-dashed border-blue-300 rounded-lg",
  "children": [
    {
      "type": "div",
      "className": "p-4 border-2 border-dashed border-green-300 rounded",
      "children": [
        {
          "type": "div",
          "className": "p-3 border-2 border-dashed border-purple-300 rounded text-center",
          "children": [
            {
              "type": "text",
              "content": "Nested Content",
              "className": "font-mono text-sm"
            }
          ]
        }
      ]
    }
  ]
}