c15t/docs/shared/react/components/dev-tools.md

Headless JavaScript consent management platform for cookie banners, privacy preferences, consent storage, and script gating.

---
title: Dev Tools
description: Reference page for dev tools.
group: reference
---
`DevTools` is a floating panel that shows the internal state of the consent manager. Use it during development to inspect consent values, geolocation results, loaded scripts, and debug consent flows. Also exported as `C15TDevTools` if you need to avoid naming conflicts with other devtools.

> ⚠️ **Warning:**
> DevTools should only be included in development builds. The component renders nothing to the React tree - it injects directly into document.body.

## Installation

DevTools lives in a separate package to keep it out of production bundles:

```bash
bun add -D @c15t/dev-tools
```

## Configuration

```tsx
<DevTools
  position="bottom-right"  // 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
  defaultOpen={false}       // Start with panel open
  namespace="c15tStore"     // Store namespace to connect to
  disabled={false}          // Disable without removing from tree
/>
```

## Panels

|Panel|What it shows|
|--|--|
|**Consents**|Current consent state for all categories|
|**Location**|Detected jurisdiction, country, region, and consent model|
|**Scripts**|Configured scripts and their load status|
|**IAB**|IAB TCF state (when enabled) - TC string, vendor consents, purposes|
|**Events**|Timeline of consent events and state changes|
|**Actions**|Buttons to trigger consent actions (accept all, reject all, reset)|

## TanStack Devtools

`@c15t/dev-tools/tanstack` exposes a panel component and plugin factory that match TanStack Devtools' plugin API, so c15t can sit beside Query and Router without a custom mount adapter:

```tsx
import * as React from 'react';
import { useRouter } from '@tanstack/react-router';
import { TanStackDevtools } from '@tanstack/react-devtools';
import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
import { c15tDevtools } from '@c15t/dev-tools/tanstack';

export function AppDevtools() {
  const router = useRouter();

  return (
    <TanStackDevtools
      plugins={[
        {
          name: 'TanStack Query',
          render: <ReactQueryDevtoolsPanel />,
        },
        {
          name: 'TanStack Router',
          render: <TanStackRouterDevtoolsPanel router={router} />,
        },
        c15tDevtools(),
      ]}
    />
  );
}
```

## Props

|Property|Value|
|:--|:--|
|Type Name|\`C15TDevToolsProps\`|
|Source Path|\`./packages/dev-tools/src/react.ts\`|

\*ExtractedTypeTable: Could not extract "C15TDevToolsProps" from "./packages/dev-tools/src/react.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*