# inspectkit

> inspectkit is a free, open-source React component that adds Figma-style inspection tools to a running web app: measuring distances between elements, rulers with draggable guides, layout grids and a spacing lint. It is built for checking that what shipped matches the design, including work written by AI.

- Page: https://onyekachi.me/inspectkit
- npm: https://www.npmjs.com/package/inspectkit
- Source: https://github.com/onyekvchi/inspectkit
- License: MIT
- Author: Onyekachi Mbaike, https://onyekachi.me/

## Why it exists

Spacing is hard to judge by eye. inspectkit shows the exact distances in a running app, so feedback to an AI coding agent or a teammate can be specific ("make this gap 24px") instead of vague ("this feels off").

## Install

```bash
npm install -D inspectkit
```

Requires React 18 or later. It ships as a client component, so it works in frameworks that use React Server Components, such as the Next.js App Router. It renders nothing on the server and nothing in production builds unless `productionEnabled` is set.

## Use

```jsx
import { InspectKit } from 'inspectkit'

export default function App() {
  return (
    <>
      <YourApp />
      <InspectKit />
    </>
  )
}
```

Mount it once, anywhere in the React tree.

## Tools and shortcuts

| Tool | Shortcut | What it does |
| --- | --- | --- |
| Measure | Hold Option (Alt) | Hover an element to see its size and its distance to each edge of its parent. Click to select it, then hover another element to measure the gap between them. Shift-click pins a measurement. |
| Rulers | Shift + R | Rulers along the top and left of the viewport. Drag from a ruler to add a guide. Remove a guide by double-clicking it, pressing Delete while hovering it, or dragging it back onto its ruler. |
| Grids | Shift + G (or Ctrl + G) | Figma-style layout grids (columns, rows and baselines) laid over the page or over a chosen element. Edit them live in the grid settings panel. |
| Lint | Shift + L | Outlines every item, fills the gaps and padding with their values, and flags any spacing that is off the scale with a red band and a suggestion such as `14 → 16`. |

The spacing lint treats multiples of 8 as on scale, with 4 also allowed by default. Set your own scale with the `lint` prop, for example `lint={{ base: 4 }}`.

## Props

| Prop | Type | Default |
| --- | --- | --- |
| `color` | string | `#f24822` |
| `guideColor` | string | `#0d99ff` |
| `grids` | GridConfig[] | `[]` |
| `lint` | `{ base?: number; allow?: number[] }` | `{ base: 8, allow: [4] }` |
| `ignore` | string (CSS selector) | none |
| `toolbar` | boolean | `true` |
| `defaultTools` | Partial<InspectKitTools> | none |
| `tools` and `onToolsChange` | controlled tool state | none |
| `pageCoordinates` | boolean | `false` |
| `productionEnabled` | boolean | `false` |

## Questions and answers

**What is inspectkit?**
A React dev tool that brings Figma's measuring, rulers, layout grids and spacing checks to your running web app.

**Who is it for?**
Designers who code and developers who care about pixel-accurate spacing, especially anyone reviewing UI that an AI agent wrote.

**Does it ship to production?**
No. It renders nothing in production builds unless you pass `productionEnabled`.

**Does it change my app's layout?**
No. It draws overlays on top of the page and measures elements as the browser laid them out.

**Is it free?**
Yes. It is open source under the MIT license.