@corbits/react-ui

React components for agent products: chat transcripts with reasoning and tool calls, approval cards, run status, artifacts and charts, styled by one Tailwind v4 token theme. The UI package of Corbits: it renders data a host web app loads from Interchange, and works in any React 18 or 19 app without Interchange.

Why @corbits/react-ui?

1. Props in, markup out. No component fetches, subscribes or holds a client. Your data layer stays yours, and every component renders the same in stories, tests and production.
2. Agent-shaped building blocks. ChatThread renders a message as ordered parts (text, reasoning, tool calls), and ApprovalCard, GateBlock and StepList cover a run that waits on a person.
3. Pay for what you import. One root entry, the package is side-effect free apart from its CSS, and heavy peers (Radix dialog, dropdown-menu, tooltip, sonner) are optional.
4. Server Components ready. Stateful modules ship "use client", so a React Server Components app imports them directly. Outside RSC the directive is a no-op.

Install

bun add @corbits/react-ui react react-dom lucide-react @radix-ui/react-slot

Requires Node 24 or later. Tested on React 19; the peer range also accepts React 18.2+.

Optional peers are needed only by the modules that import them. Those modules are not in the root entry, so import them by subpath:

| Peer | Subpaths | | ------------------------------- | ------------------------------------------------------------- | | @radix-ui/react-dialog | ui/dialog, ui/command-palette, ui/mic-permission-dialog | | @radix-ui/react-dropdown-menu | ui/menu | | @radix-ui/react-tooltip | ui/tooltip | | sonner | ui/toast |

Quickstart

Import the stylesheet once at the app root, before your own CSS, and mount ThemeProvider near the root:

import "@corbits/react-ui/styles.css";

import { ChatThread, ThemeProvider, type ChatMessage } from "@corbits/react-ui";

const messages: ChatMessage[] = [
  {
    id: "m1",
    role: "user",
    createdAt: "2026-01-01T09:00:00Z",
    parts: [{ type: "text", text: "What changed in the repo today?" }],
  },
  {
    id: "m2",
    role: "agent",
    createdAt: "2026-01-01T09:00:04Z",
    parts: [
      { type: "reasoning", text: "Check the commit log first." },
      {
        type: "tool",
        toolCallId: "t1",
        toolName: "git__log",
        label: "Read today's commits",
        state: "done",
        output: "3 commits",
      },
      { type: "text", text: "Three commits landed today, all in the docs." },
    ],
  },
];

export function App() {
  return (
    <ThemeProvider>
      <ChatThread messages={messages} identity={{ name: "Scout" }} />
    </ThemeProvider>
  );
}

This renders the user message, a collapsed reasoning block, a finished tool call and the agent's reply.

styles.css includes Tailwind preflight and a base layer, so it restyles the page. If you already run Tailwind v4, import @corbits/react-ui/theme.css instead and let your build generate the utilities. Import one of the two, never both; without either, components render unstyled.

Where it fits

• Interchange runs AI agents as principals (first-class identities with their own permissions and credentials). The hub is its multi-tenant control plane: tenants, principals, grants (permissions a principal holds) and credentials. The sidecar is the portable agent runtime.
• Corbits is the set of published packages around Interchange that turn an agent into a product. This package is the UI bucket: it runs in the host web app and plugs into the host's data layer, not into the hub or the sidecar.
• It pairs with the hub modules whose data it renders, such as @corbits/artifacts, @corbits/mailbox and @corbits/cron.

Reference

Import from the root; it tree-shakes to what you use. Only the optional-peer modules have their own subpath:

import { Button } from "@corbits/react-ui";
import { Toaster, toast } from "@corbits/react-ui/ui/toast";

export function SignOut() {
  return (
    <>
      <Button onClick={() => toast("Signed out.")}>Sign out</Button>
      <Toaster position="bottom-right" />
    </>
  );
}

Theming

Dark mode is a .dark class on an ancestor. With neither .dark nor .light on the root, the tokens follow prefers-color-scheme and set color-scheme for native controls; dark: utilities still need a .dark ancestor.

ThemeProvider toggles both classes and persists the choice under storageKey. Hosts that manage the class themselves add .light for an explicit light choice, since removing .dark falls back to the OS. To avoid a dark first paint for a stored light choice on a dark OS, add .light before first paint only when the stored choice is light:

<script>
  if (localStorage.getItem("corbits-theme")?.includes('"light"'))
    document.documentElement.classList.add("light");
</script>

The theme names Red Hat Display and Space Mono but does not bundle them. Load them yourself or the stack falls back to system fonts; override --font-sans and --font-mono for a face loaded under another name.

Components

Everything imports from @corbits/react-ui, except rows marked "optional peer", which import from the subpath shown; see Install.

Chat

| Component | What it is | | --------------------- | ------------------------------------------------------------------------ | | ChatThread | Scrolling transcript of user and agent messages | | AgentTurn | One agent reply: reasoning, tool calls, answer, in order | | MessageBubble | One user or system message | | ChatInput | Auto-growing message input with a send/stop button | | ChatComposer | ChatInput with suggestion chips for an empty conversation | | ChatPanel | Docked chat frame with header and footer | | PartsRenderer | Renders a list of message parts | | ReasoningBlock | Collapsible thinking text | | ToolBlock | A tool call's lifecycle: running, done, failed | | ToolNarrative | What the agent did, as one expandable line | | ToolPicker | Browse, search and select tools | | QuickReplyChips | Tappable suggested replies | | TypingIndicator | Agent-is-typing dots | | ThinkingIndicator | Animated Corbits mark with a status label | | ThinkingMark | Decorative animated Corbits mark | | ThinkingLabel | Rotating-verb status label | | ShimmerText | Shimmer sweep over text | | MicButton | Permission-aware microphone toggle | | VoiceWaveform | Live audio level bars | | DictationStatusLine | Composer dictation status row | | MicPermissionDialog | Microphone permission prompt (optional peer, ui/mic-permission-dialog) |

Runs

| Component | What it is | | ------------------- | ------------------------------------------------- | | LiveRunBanner | Status of a run in progress | | LiveStatusLine | The single "what's happening now" line | | ApprovalCard | Approve or reject a pending action | | GateBlock | Chrome for a run parked on a human decision | | StepList | Vertical list of run steps and their status | | HorizontalStepper | Horizontal step progress | | ProgressChecklist | Steps of a long operation and how far along it is | | TraceWaterfall | Run-trace timeline, one row per span | | IntakeForm | Inputs a workflow asks for before it runs | | RunNowButton | Run something immediately | | ConfirmButton | Button that asks for a second click | | NowCards | Attention band of items needing action | | NotificationsBell | Bell with count and a panel slot |

Artifacts

| Component | What it is | | ---------------- | --------------------------------------------------- | | ArtifactBody | One artifact, drawn the way its kind implies | | ArtifactNotice | "Nothing to draw here" message for artifact viewers | | BlockCard | Generative-UI block frame | | ResearchBody | Research brief and report | | CompareBody | Side-by-side comparison | | EmbedBody | Sandboxed third-party embed | | CsvTable | Capped preview of CSV text | | QuoteCard | A rotating quote | | ProfileCard | Identity, status, actions and channels |

Charts

| Component | What it is | | ----------------- | --------------------------------------------------- | | ChartFrame | Caption, legend, plot, and the same data as a table | | TimeSeriesChart | Values over time | | BarChart | Vertical bars | | CategoryBars | Dense horizontal category ranking | | Sparkline | Inline trend line | | TokenMosaic | Shares of a whole as one stacked strip | | StatGrid | Grid of headline numbers | | AnimatedNumber | Number that counts to its new value |

Layout

| Component | What it is | | ------------------- | -------------------------------------------- | | PageShell | Page margins and scroll ownership | | PagePanel | Bordered page-content frame | | TopBar | Title, breadcrumbs and actions row | | Sidebar | Collapsible navigation sidebar | | SidebarPanel | Sidebar with pins, body and footer | | SidebarItemRow | One sidebar row | | ListDetail | Index on the left, open item on the right | | InspectorShell | Side inspector rail | | Section | Titled block of content | | SettingsPanel | Settings frame with optional save | | LibraryPageHeader | Title, count and controls for a library page | | Card | Bordered content card | | EmptyState | Title, description, icon and action | | RichEmptyState | Empty state with suggested next-step actions | | BootScreen | Screen shown before the app loads | | DitherCanvas | Animated dithered background | | CorbitsMark | Corbits logo | | AuthLayout | Sign-in page layout | | LoginForm | Sign-in and sign-up form, with optional SSO |

Controls

| Component | What it is | | ------------------- | --------------------------------------------------------------- | | Button | Button with variants and sizes | | Input | Text input | | Textarea | Multi-line input | | Select | Native select | | Checkbox | Checkbox | | SelectionCheckbox | Row-selection checkbox | | Switch | On/off toggle | | FileInput | File picker | | Tabs | Tab strip | | ViewToggle | Grid or rows segmented control | | FilterBar | Row of filters with an active-filter summary | | FilterChip | One toggleable filter | | KindCardGrid | Selectable card grid | | BulkActionBar | Actions for a multi-row selection | | Table | Table primitives | | SortableTable | Table with sortable columns | | Badge | Status label | | StatusDot | Colored status dot | | Avatar | Initials or image avatar | | ProviderMark | Which service an action goes through | | Skeleton | Loading placeholder | | Dialog | Modal dialog (optional peer, ui/dialog) | | CommandPalette | Global search overlay (optional peer, ui/command-palette) | | Menu | Dropdown menu (optional peer, ui/menu) | | InfoTooltip | Hover info tooltip (optional peer, ui/tooltip) | | Toaster | Toast host; call toast() anywhere (optional peer, ui/toast) | | ThemeProvider | Persists light, dark or system mode and presets | | ThemeToggle | Light, dark or system switch |

Using with Interchange

The host app owns the connection to the hub; components only take props.

1. Load run state with @intx/hub-client: createRunSession polls a workflow run's event log and exposes a seq-ordered WorkflowRunEvent timeline.
2. Map that timeline to props: agent output to ChatMessage parts for ChatThread, step events to StepList items, and a run parked on a person to GateBlock or ApprovalCard.
3. Wire callbacks back to the hub. ApprovalCard's onApprove and onReject call your hub route that resolves the awaited signal; the hub checks the caller's grant, not the component.

Upgrading from 0.1

• Install from npm. Git installs (github:corbitsdev/react-ui#<sha>) no longer build dist/.
• Per-module subpaths are gone: import from @corbits/react-ui (import { Button } from "@corbits/react-ui").
• ui/dialog, ui/command-palette, ui/mic-permission-dialog, ui/menu, ui/tooltip and ui/toast are subpath-only, and their peers are optional: import { Toaster, toast } from "@corbits/react-ui/ui/toast". Install the peer for each subpath you keep.
• lib/csv, lib/url, lib/utils, lib/workflow-registry and ui/chat-dock-timing are internal. Replace cn with twMerge(clsx(...)).
• Stateful components ship "use client". Client wrappers you wrote for them still work, and can go.
• 84 unused modules are removed, ui/command is removed, ActivityBlock is renamed ReasoningBlock, and AuthLayout no longer renders DitherCanvas by default.
• With neither .dark nor .light on the root, the theme follows the OS. Hosts that toggle .dark must add .light for an explicit light choice, or mount ThemeProvider.

License

LGPL-2.1-only. See LICENSE.