# @plumeria/inspector
Source: https://plumeria.dev/docs/api-reference/components/inspector
`@plumeria/inspector` is an interactive DevTools utility component that allows you to inspect elements, highlight components, and view their compiled Plumeria styles directly in the browser.
***
## Installation [#installation]
To start using the inspector, install the `@plumeria/inspector` package in your project.
{/* prettier-ignore */}
```sh title="Terminal"
npm i @plumeria/inspector
```
{/* prettier-ignore */}
```sh title="Terminal"
yarn add @plumeria/inspector
```
{/* prettier-ignore */}
```sh title="Terminal"
pnpm i @plumeria/inspector
```
***
## Basic Usage [#basic-usage]
Import `Inspector` and render it at the root of your application (e.g., in a root layout or main entry point component).
```tsx title="app/layout.tsx"
import { Inspector } from '@plumeria/inspector';
import type { ReactNode } from 'react';
export default function Layout({ children }: { children: ReactNode }) {
return (
{/* Render the inspector component */}
{children}
);
}
```
***
## Features [#features]
* **Interactive Hover Overlay**: Hovering over elements displays a visual border highlight showing their target area.
* **CSS Property Tooltip**: Shows the active CSS rules, classes, and properties injected by Plumeria for the hovered element.
* **Target Freezing**: Press the `Shift` key to freeze/lock targeting onto the currently hovered element. This allows you to move your cursor into the inspector tooltip and scroll through rules. Press `Shift` again to unlock.
* **Keyboard Shortcut**: Press `Cmd + I` / `Ctrl + I` to toggle the inspector on and off.
* **Floating Badge Toggle**: A minimalist, semi-transparent badge in the bottom-right corner shows the inspector status and can be clicked to toggle it.
***
## Props [#props]
| Prop | Type | Default | Description |
| --------- | --------- | ------- | ------------------------------------------------------------------------------ |
| `initial` | `boolean` | `false` | If `true`, the inspector starts toggled ON. If `false`, it starts toggled OFF. |
***
## Production Mode [#production-mode]
By default, the `Inspector` imported from `@plumeria/inspector` is stripped from production builds entirely. The main entry point resolves through the `production` export condition to a no-op module, so your bundler emits no client chunk for it — costing 0KB in production.
If you want the inspector accessible in production (for staging environments, demos, or public showcases), import from the `@plumeria/inspector/production` subpath instead:
```tsx
import { Inspector } from '@plumeria/inspector/production';
export default function Layout({ children }: { children: ReactNode }) {
return (
{children}
);
}
```
***
## Live Demo [#live-demo]
The inspector is active right here on this documentation site!
To try it out:
1. Click the **Inspector: ON** badge in the bottom-right corner, or press `Cmd + I` / `Ctrl + I`.
2. Hover over any text, heading, or container on this page to see the outline and compiled rules.
3. Press `Shift` to freeze the selection and explore the details in the tooltip.