UI Components

@run0/jiki-ui is a companion React component library for jiki. It provides ready-made UI building blocks — a code editor, terminal, file explorer, browser preview, and more — so you can assemble interactive coding environments without starting from scratch.

Installation

npm install @run0/jiki-ui

@run0/jiki-ui requires React 19+ as a peer dependency.

Components

Component	Description
`CodeEditor`	Syntax-highlighted editor with Shiki
`Terminal`	Command input and color-coded output
`BrowserWindow`	Browser chrome with navigation and preview
`FileExplorer`	Recursive file tree with icons
`AIChatPanel`	Chat interface for AI-assisted coding
`PanelToggle`	Collapsible panel divider
`MobileTabBar`	Tab navigation for mobile layouts

Utilities

Hooks, helpers, and theme functions are documented on the Utilities page.

Theming

Every component accepts an optional accentColor prop to control its color scheme. The available colors are:

type AccentColor = "emerald" | "violet" | "orange" | "blue" | "pink" | "green" | "amber";

Most components default to "emerald". Pass a different color to match your application’s look:

<Terminal lines={lines} onClear={handleClear} accentColor="violet" />

Variants

Terminal and FileExplorer support a variant prop with "default" and "compact" options. Use "compact" for tighter layouts where multiple panels share the screen.

<FileExplorer files={tree} selectedFile={path} onSelect={setPath} variant="compact" />