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 >= 18orpreact ^10(both optional);zod ^3.24(optional, only needed forzodAdapter)
Install
npm i @dev-bench/components
# or
pnpm add @dev-bench/componentsMinimal example — ObjectInspector
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
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 for a longer walkthrough and the API reference for the full surface.