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

npm

npx @mindfiredigital/ignix-ui add debugbox

Yarn

yarn @mindfiredigital/ignix-ui add debugbox

pnpm

pnpm @mindfiredigital/ignix-ui add 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';