Customize the React SDK

DatairaInsights is a clean default, not a fixed product shell. Customize it at three levels: feature modes, design tokens, or component composition.

Configure the workspace

<DatairaInsights
  features={{
    navigation: ["dashboards", "metrics", "conversations"],
    search: "global",
    evidence: ["steps"],
    messageActions: ["copy", "retry"],
    resultActions: ["save", "download"],
    controls: "icon-and-label",
    libraryControls: "icon",
    libraryView: "list",
    libraryViewToggle: "visible",
    activity: "auto",
    timezone: "visible",
  }}
  table={{ controls: "auto", sorting: "enabled", pageSize: 20 }}
/>

Arrays control both visibility and order. Use navigation: [] for chat only, or evidence: ["steps"] to keep the useful execution trace without showing SQL or query-result rows.

Match the host theme

Use controlled theme state when users should be able to switch appearance. The SDK renders the control in its own workspace bar, while the host owns persistence.

import { useState } from "react";
import { DatairaInsights, type DatairaTheme } from "@dataira/react";

const [theme, setTheme] = useState<DatairaTheme>("light");

<DatairaInsights theme={theme} onThemeChange={setTheme} />

Pass theme without onThemeChange to lock the SDK to one appearance.

The SDK inherits the host font and exposes CSS variables:

.my-product .dataira-root {
  --dataira-bg: var(--background);
  --dataira-bg-subtle: var(--muted);
  --dataira-fg: var(--foreground);
  --dataira-muted: var(--muted-foreground);
  --dataira-border: var(--border);
  --dataira-accent: var(--primary);
  --dataira-accent-fg: var(--primary-foreground);
  --dataira-radius: var(--radius);
}

className, style, and message overrides let you localize or brand the surface without forking it.

Compose only what you need

Exported hooks include useChat, useMetrics, useDashboards, useDashboard, useCollections, useCollectionItems, and useResourcePreferences. Components include ChatPanel, DataTable, MetricLibrary, DashboardLibrary, WorkspaceSearch, and DatairaDashboard. ResultVisualization is the shared result primitive used by chat, saved-metric previews, and dashboard widgets; its compact density changes layout density without introducing a second table or chart renderer.

Library components support card/list views, controlled or default view state, optional search, compact icon actions, stars, pins, and custom children. Action menus render in a floating layer, so opening one does not move or clip content. List previews remain open while the pointer is over the floating result, making long table previews scrollable.

For data answers, the agent returns a concise, corrected metricTitle in the same language as the user's request. useChat().saveMessage(index) stores that title and keeps the original user question in questionText. The optional resolveMetricTitle hook option can enforce a host naming convention without changing the agent prompt.

Use the headless client when your UI should not use any Dataira components.