Visual layout debugger for development - inspect containers, padding, margins, and grid systems
Click the "Enable Debug Mode" button in the bottom-left corner
Or use the keyboard shortcut: Ctrl+Shift+D
Observe the visual indicators for containers, padding, and margins
Container Visualization
Blue backgrounds and borders highlight container elements
Padding Indicators
Green backgrounds show padding areas within elements
Margin Outlines
Red dashed borders indicate margin spacing
Section Backgrounds
Yellow dotted borders highlight section elements
Grid Layouts
Purple outlines show grid container structure
Flex Layouts
Pink outlines indicate flexbox containers
Size Display
Shows current viewport width and height in the top-right corner
Breakpoint Indicator
Displays the current responsive breakpoint (Mobile, Tablet, Desktop, Large Desktop)
Container Sizes Reference
Quick reference for standard container breakpoints (SM, MD, LG, XL, 2XL, 3XL)
// In your root layout (layout.tsx)
import { DebugOverlay } from '@repo/ui/core';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
{/* Add at the end of body */}
<DebugOverlay enabled={false} />
</body>
</html>
);
}Development Only
This is a temporary development tool. Remove before deploying to production or use conditional rendering based on environment.
enabledbooleandefault: falseEnable debug mode by default. Users can still toggle it with Ctrl+Shift+D.
Enable the debug overlay to see how it highlights the following layout structure:
This is a sample card to demonstrate the debug overlay.
Notice the colored overlays when debug mode is active.
Blue for containers, green for padding, red for margins.
Section Element
This section element will be highlighted with a yellow dotted border in debug mode.