bonobo.sh
bonobo-ui-core

116 components extracted from Bonobo Terminal, including ToolCallCard, StreamingMarkdown, MemoryDetailPanel, FlowDiagram, and PolyIcons. Built on Radix primitives, tree-shakeable. Published on npm; a separate marketing subpath powers this site.

View on GitHubInstall
Bonobo at a drafting table with a dip pen and UI wireframes
116
components
7
categories
2
subpaths
v1.8.3
published
Components

79 components with live demos across 7 categories, extracted from Bonobo Terminal. Browse the catalog, then see the real components from bonobo-ui-core rendered live on the same terminal-dark surface they ship with.

Install
bash
npm install bonobo-ui-core
Then for app chrome:
app.tsxtsx
import { BonoboProvider, ToolCallCard, StreamingMarkdown } from "bonobo-ui-core";
import "bonobo-ui-core/styles.css";

export function App() {
  return (
    <BonoboProvider colorScheme="dark">
      <StreamingMarkdown content={response} />
    </BonoboProvider>
  );
}
Or for a landing page / docs site:
landing.tsxtsx
import { MarketingRoot, Hero, CtaButton } from "bonobo-ui-core/marketing";
import "bonobo-ui-core/styles.css";

<MarketingRoot>
  <Hero
    eyebrow="Local · Transparent · Open"
    title="Offline AI for developers."
    actions={<CtaButton href="/start">Get started</CtaButton>}
  />
</MarketingRoot>
Built on
  • React 18 / 19
    externalized peer dep; hooks for drag, resize, and history
  • Radix UI
    accessible Popover, Tabs, Tooltip, Dropdown, Dialog
  • CSS Modules + custom properties
    scoped styles, zero-radius brutalist token system
  • @tabler / simple-icons
    default icon set + 3,000+ brand icons
  • Vite 6 + TypeScript 5.7
    strict types, fast builds, module federation remote
  • streamdown · shiki · mermaid · @xyflow
    optional: markdown, highlighting, diagrams, node graphs
  • elkjs · dagre
    automatic graph layout for flow diagrams
  • @xterm/xterm
    optional: terminal emulator integration
open source MIT License

Open source

The same 116 components used by Bonobo Terminal and this site. MIT-licensed, in active development. Available via npm.

npm package