# Getting Started

> Install @dev-bench/components and render your first inspector.

Source: https://components.n.yatsyk.com/docs/components/getting-started

# Getting Started

## 1. Install

```bash
pnpm add @dev-bench/components
```

`react >= 18` (or `preact ^10`) must be installed in the host app. Install
`zod ^3.24` only if you plan to use [`zodAdapter`](./api.mdx#object-inspector).

## 2. Import the styles

Component styles are shipped as CSS files so you can import only what you use:

```ts
import "@dev-bench/components/styles/tokens.css";       // CSS custom properties
import "@dev-bench/components/styles/components.css";   // shared primitives
import "@dev-bench/components/console/styles.css";      // ConsolePanel + TraceTree
import "@dev-bench/components/object-inspector/styles.css";
```

`tokens.css` defines the design tokens (color, spacing, typography). The
component-specific stylesheets reference those tokens, so always load
`tokens.css` first.

## 3. Render an inspector

```tsx
import { ObjectInspector, inferredAdapter } from "@dev-bench/components";

const session = {
  user: { id: 42, email: "ada@example.com" },
  flags: { beta: true, paid: false },
  events: ["login", "view-doc", "click"],
};

export function DebugPanel() {
  return (
    <div style={{ width: 360, padding: 16 }}>
      <ObjectInspector adapter={inferredAdapter} value={session} />
    </div>
  );
}
```

Use `inferredAdapter` to inspect any plain JS value. Swap in `zodAdapter` to
drive the inspector from a Zod schema (gives you typed editing + validation).

## 4. Add the console panel

```tsx
import { ConsolePanel, type ConsoleEntry } from "@dev-bench/components";

const entries: ConsoleEntry[] = [
  { kind: "log",   id: "1", level: "info",  at: Date.now(), parts: ["server up"] },
  { kind: "log",   id: "2", level: "warn",  at: Date.now(), parts: ["slow query: 240ms"] },
  { kind: "error", id: "3", level: "error", at: Date.now(), error: { message: "boom" } },
];

export function Console() {
  return <ConsolePanel entries={entries} />;
}
```

The panel ships with filter chips, group collapsing, and timestamp formatting
toggles — see `ConsoleFeatures` in the API for what you can opt out of.

## 5. Wire up Cmd-K

```tsx
import { CommandPalette, type CommandAction } from "@dev-bench/components";
import { useState } from "react";

const actions: CommandAction[] = [
  { id: "clear-logs", label: "Clear logs",   run: () => {/* ... */} },
  { id: "toggle-net", label: "Toggle network", run: () => {/* ... */} },
];

export function CmdK() {
  const [open, setOpen] = useState(false);
  return (
    <CommandPalette
      open={open}
      onOpenChange={setOpen}
      actions={actions}
    />
  );
}
```

## 6. Browse the rest

The full export surface — primitives, hooks, tweak panels, http inspector — is
listed in the [API reference](./api.mdx).