DebugBox

Overview

DebugBox is a utility wrapper that overlays grid, spacing guides, breakpoints, and dimensions on any component, helping developers debug layouts visually.

Preview

Preview

DebugBox Overlay Example

Code

import { DebugBox } from '@site/src/components/UI/DebugBox';
import { Box } from '@site/src/components/UI/box';

function DebugBoxExample() {
  return (
    <DebugBox showGrid showSpacing showBreakpoints showDimensions>
      <Box style={{ height: 120, padding: 16, border: '1px solid #ddd', borderRadius: 8 }}>
        DebugBox Overlay Example
      </Box>
    </DebugBox>
  );
}

Installation

CLI

ignix add component debugbox

Manual

// Import DebugBox.tsx and wrap your component inside src/components/Demo
import { DebugBox } from '@site/src/components/UI/DebugBox';

Usage

Import the components:

import { DebugBox } from '@site/src/components/UI/DebugBox';