# Components

> App-agnostic React/Preact UI primitives for dev-tools surfaces.

Source: https://components.n.yatsyk.com/docs/components

# @dev-bench/components

A set of app-agnostic React/Preact UI primitives for dev-tools surfaces — object
inspector, console, command palette, tweaks panel, and supporting primitives.
No framework lock-in, no `node:` imports, no AAR/PPA deps. Drop into any
browser app that already renders React or Preact.

* **Stability:** stable
* **Platforms:** node, browser
* **Peer dependencies:** `react >= 18` *or* `preact ^10` (both optional);
  `zod ^3.24` (optional, only needed for `zodAdapter`)

## Install

```bash
npm i @dev-bench/components
# or
pnpm add @dev-bench/components
```

## Minimal example — `ObjectInspector`

```tsx
import "@dev-bench/components/styles/tokens.css";
import "@dev-bench/components/object-inspector/styles.css";
import { ObjectInspector, inferredAdapter } from "@dev-bench/components";

const value = { name: "Ada", years: [1815, 1852], notes: { field: "math" } };

export function Demo() {
  return <ObjectInspector adapter={inferredAdapter} value={value} />;
}
```

## Minimal example — `ConsolePanel`

```tsx
import "@dev-bench/components/styles/tokens.css";
import "@dev-bench/components/console/styles.css";
import { ConsolePanel, type ConsoleEntry } from "@dev-bench/components";

const entries: ConsoleEntry[] = [
  { kind: "log", id: "1", level: "info", at: Date.now(), parts: ["hello world"] },
];

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

See [Getting started](./getting-started.mdx) for a longer walkthrough and the
[API reference](./api.mdx) for the full surface.